[Vuejs]-How to add/remove style with two buttons with Vue

by

0👍

✅

If I’ve understood the question correctly then you should just need the child component to emit an event when the - button is clicked. The parent component holds the relevant state and should update that state when that event occurs.

In my example I have used v-if rather than v-show. Using v-show would set display: none, whereas v-if removes the child component completely, including the corresponding DOM nodes. Either would work for such a simple example.

Articles = {
  template: `
    <div>
      <button @click="onCloseClick">- Close</button>
      <p>Other stuff</p>
    </div>
  `,
  
  methods: {
    onCloseClick () {
      this.$emit('close')
    }
  }
}

new Vue({
  el: '#app',
  
  components: {
    Articles
  },
  
  data () {
    return {
      isActive: false
    }
  }
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <button @click="isActive = true">+ Expand</button>
  <Articles
    v-if="isActive"
    @close="isActive = false"
  ></Articles>
</div>

0👍

A good place to start understanding vueJS conditional rendering would be here.

// In your index.js file 

var app = new Vue({
  el: '#app',
  data: {
    // create a data binding to display or hide the div
    displayDiv: false
  }
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button class="plus" @click="displayDiv = true">+</button>
      <button class="minus" @click="displayDiv = false">-</button>
      <!-- I added an addition button to toggle the display --> 
      <button class="toggle" @click="displayDiv = !displayDiv">Toggle</button>
      <div
        v-if="displayDiv"
        style="height: 500px; width: 500px; background-color: blueviolet;"
      ></div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Alternatively you could use dynamic css to dynamically add or remove a css class that hides the div on load and only displays when the "+" button is pressed.

Leave a comment