显示此父项的子项单击 vue

Question

我想在单击其父级后显示直接子级。 jquery容易，vue难，怎么办？

模板：

<boxes inline-template>    
<div class="white-box" @click="toggleTick">Purchase only 
        <div v-if="showTick"><i class="fas fa-check"></i></div>
    </div>
</boxes>

js

Vue.component('boxes', {
    data: function () {
        return {
            showTick: false
        }
    },
    methods: {
        toggleTick () {
          this.showTick = !this.showTick
      } 
    }
})
  var app = new Vue({
    el: '#app',
        data: {

        }
  })

目前我有多个“白盒” div，它显示了所有这些的子 div，我只想显示被点击的父母的孩子的 div。

Answer 1

您的white-boxes 共享同一个showTick 变量，因此单击其中一个变量会更改所有变量的值。

有两种可用的解决方案：

• 在同一个boxes 组件下有多个boxes 组件，而不是多个white-boxes。某些东西在 DOM 中最终看起来像这样

  <boxes>...</boxes>
  <boxes>...</boxes>
  <boxes>...</boxes>
  

• 对showTick 使用数组并在调用toggleClick 时使用索引。另请注意，要使数组中的更改具有反应性，您需要使用 Vue.set。

我推荐前一种解决方案。

Answer 2

你应该有你期望的行为：

Vue.component('boxes', {
    data: function () {
        return {
            showTick: false
        }
    }
})
var app = new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <boxes inline-template>    
    <div class="white-box" @click="showTick = !showTick">
      <span>
        Purchase only 
      </span>
      <div v-if="showTick">Component 1</div>
    </div>
  </boxes>
  <boxes inline-template>    
    <div class="white-box" @click="showTick = !showTick">
      <span>
        Purchase only 
      </span>
      <div v-if="showTick">Component 2</div>
    </div>
  </boxes>
</div>