[Vuejs]-Vue.js – on click collapse the nearest div

by

0👍

Each div should have each own collapsed state for control. You can turn collapsed into an array/object to control them.

simple example: https://codepen.io/jacobgoh101/pen/QQYaZv?editors=1010 

<div id="app">
  <div v-for="(data,i) in dataArr">
    {{data}}<button @click="toggleCollapsed(i)">toggle me</button>
    <span v-if="collapsed[i]">this row is collapsed</span>
    <br/>
    <br/>
  </div>
</div>

<script>
var app = new Vue({
  el: "#app",
  data: {
    dataArr: ["data0", "data1", "data2"],
    collapsed: [false, false, false]
  },
  methods: {
    toggleCollapsed: function(i) {
      this.$set(this.collapsed, i, !this.collapsed[i]);
    }
  }
});
</script>

Leave a comment