显示此父程序的子级，单击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

你应该有你期望的行为：

​

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>

​

Answer 2

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

这方面有两个可用的解决办法：

• 在同一个boxes组件下拥有多个white-boxes组件，而不是多个boxes组件。有些东西在DOM中看起来像这样 ...
• 对showTick使用数组，在调用toggleClick时使用索引。还请注意，为了使数组中的更改是反应性的，您需要使用Vue.set。

我推荐前一种解决方案。