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，我只想显示单击的父级孩子的div。

Answer 1

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

有2种解决方案：

在同一boxes组件下具有多个white-boxes组件，而没有多个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>

显示此父级点击提示的子项

2 个答案: