[Vue.js] Implementation of menu function Implementation version rails6

Introduction

Vue.js implements the ability to open and close menus when clicked. In this article, it is implemented in rails6, so if you are stumbling on the introduction, please refer to the "Vue.js introduction" below.

[Vue.js] Implementation of menu function Vue.js introduction rails6 https://qiita.com/AKI3/items/e87203c590322c908946

table of contents

1.Vue.js 2.html 3.scss

Development environment

Vue 2.6.12 rails 6.0.0 ruby 2.6.5

Implementation

Let's implement it ~

  1. Vue.js

app/javascript/packs/menu_vue.js


const app = new Vue({
  el: '#app',
  data: {
    ActiveBtn: false
  },
})

Implementing Veu.js itself is easy.

  1. html

html:app/views/tops/new.html.erb


<div class="top-editor-wrap">
  <div id="app">
    <!--Menu button-->
    <div class="top-editor_btn" v-on:click='ActiveBtn=!ActiveBtn'>← Here is veu.js
      <h1>button</h1>
    </div>
    <!--Side bar-->
    <transition name="editor-side">
      <div class="editor-side" v-show="ActiveBtn">← Here is veu.js
        <div class="editor">
          <h3>menu</h3>
          <p>Item 1</p>
          <p>Item 2</p>
          <p>Item 3</p>
        </div>
      </div>
    </transition>
  </div>
</div>

The description that v-on: click ='ActiveBtn =! ActiveBtn' reverses (inverts) the boolean value of ActiveBtn when the button is clicked.

  1. scss

app/assets/stylesheets/editor.scss


.top-editor_btn {
  position: fixed;
  top: 30px;
  left: 40px;
  cursor: pointer;
  z-index: 50;
}

.top-editor_btn img {
  width: 65px;
}

.editor-side {
  position: fixed;
  background-color: hsla(0, 0%, 57%, 0.829);
  z-index: 30;
  width: 325px;
  height: 100vh;
  top: 0;
}

That's it! !!

Summary

The point of this function was ActiveBtn. Of course it is possible to create the same function only with JS, but the advantage of using Veu.js was that the amount of code was overwhelmingly reduced. I'm just starting to study, so I'd like to learn more ~

Finally

I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled.

See you next time ~

reference

【official】 https://jp.vuejs.org/v2/guide/

[Vue.js] Implementation of menu function Vue.js introduction https://qiita.com/AKI3/items/e87203c590322c908946

I was very helpful. Thank you very much. https://qiita.com/helloworld193/items/9aed3870be1e739c3ad2

Mr. Taniguchi of Tomosuta https://www.youtube.com/playlist?list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW

Recommended Posts

[Vue.js] Implementation of menu function Implementation version rails6
[Vue.js] Implementation of menu function Vue.js introduction rails6
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of CSV import function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
[Ruby on rails] Implementation of like function
Implementation of search function
Rails search function implementation
Implementation of pagination function
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of retweet function in SNS application
Ruby on Rails <2021> Implementation of simple login function (form_with)
Rails fuzzy search function implementation
Implementation of Ruby on Rails login function (devise edition)
Implementation of sequential search function
Implementation of like function (Ajax)
[Ruby on Rails] Implementation of tagging function/tag filtering function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
Implementation of category pull-down function
Login function implementation with rails
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
[Rails 6] Pagination function implementation (kaminari)
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Rails sorting function implementation (displayed in order of number of like)
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of user logic deletion
Kaminari --Added pagination function of Rails
[Rails] Implementation of many-to-many category functions
[Ruby on Rails] Comment function implementation
[Rails 6] Like function (synchronous → asynchronous) implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] Implementation of new registration function in wizard format using devise
[Rails 6] Implementation of new registration function by SNS authentication (Facebook, Google)
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Addition of Ruby On Rails comment function
Implementation of user authentication function using devise (2)
[Ruby on Rails] Follow function implementation: Bidirectional
Implementation of user authentication function using devise (1)
Rails Basic CRUD function implementation procedure scaffold
Implementation of user authentication function using devise (3)
[Rails] Implementation of validation that maintains uniqueness
[Rails] I will explain the implementation procedure of the follow function using form_with.
Introduction of Sudoku answer application "Sudoku automatic answer" (Android version) and its implementation function
DM function implementation
[Rails 6] Ranking function
[Rails] Category function
[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
Implementation of GKAccessPoint