Question

如何通过按钮（父级按钮）在v-for循环内单击来渲染v-if组件？并且应仅在点击的那个项目中呈现

<div v-for="item in items">
  <button @click >Show child<button>
  <div>{{item.name}}</div>
  <child v-if="this button clicked" :item="item"><child>
<div>

Answer 1

~~您可以利用v-for指令中可用的项目...索引（例如v-for="(item, i) in items"），通过更改将其（项目的索引）绑定到显示项目的函数它的属性：~~

更新：需求优化后，初始答案已删除。

由于您希望避免项的变异，因此可以将它们包装在Map对象中（作为键），并将可见性设置分别保留为Map值。不幸的是，据我所知，Vue.js目前不支持Map对象的反应性，这就是为什么我必须使用forceUpdate手动触发重新渲染的原因：

Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
  template: '<p>Visible child</p>'
})

new Vue({
  el: "#demo",
  template: `
<div>
  <div v-for="item in items">
    <button @click="toggleChild(item)">Toggle child</button>
    <div>{{item.name}}</div>
    <child v-if="isVisible(item)" :item="item"></child>
  </div>
</div>
`,
  data () {
    return {
      itemsMap: new Map(
        [
          { name: 'test1' },
          { name: 'test2' }
        ].map(item => [item, { visible: false }])
      )
    };
  },
  methods: {
    toggleChild(item) {
      this.itemsMap.set(item, { visible: !this.itemsMap.get(item).visible });
      this.$forceUpdate();
    },
    isVisible(item) {
      return this.itemsMap.get(item).visible;
    }
  },
  computed: {
    items: function() {
      return Array.from(this.itemsMap.keys());
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div>

Answer 2

您必须在数据中存储有关每个项目（如果已单击）状态的信息。然后，当您单击按钮时，应更新特定项目的clicked属性。最后，如果item.clicked设置为true，则将显示您的子组件（或任何其他html）。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <button @click="item.clicked = true" >Show child</button>
      {{item.name}}
      <div v-if="item.clicked">Item child</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: function() {
    return {
      items: [
        {
          id: 1,
          name: 'test1',
          clicked: false
        },
        {
          id: 2,
          name: 'test2',
          clicked: false
        },
        {
          id: 3,
          name: 'test3',
          clicked: false
        }
      ]
    }
  }
}
</script>

Answer 3

简单明了，您只需为后面的v-if设置一些标志即可：

<div id="app">
  <div v-for="item in items">
    <button @click="$set(item, 'shown', true)">Show child</button>
    <div>{{ item.name }}</div>
    <div v-if="item.shown">Child component</div>
  </div>
</div>

在这里，使用$set()是因为初始的item可能缺少shown字段，因此直接用item.shown=true进行设置将不会起作用。

您还可以在单击后隐藏按钮：

<button @click="$set(item, 'shown', true)" v-if="!item.shown">Show child</button>

要切换可见性，您只需要这样做：

<button @click="$set(item, 'shown', !item.shown)">
  {{ item.shown ? 'Hide' : 'Show' }} child
</button>

JSFiddle

如何通过父项的按钮在v-for中渲染组件

3 个答案: