Vue 2 以编程方式创建切换传输答案

【问题标题】：Vue 2 Programmatically Create Toggle TransmissionsVue 2 以编程方式创建切换传输
【发布时间】：2017-06-10 13:32:15
【问题描述】：

我刚刚查看了 Vue JS 文档中有关转换的一些示例代码。我正在尝试向每个列表项添加按钮，并让它们能够在每个列表中切换内容。

这是我的实例的示例：

<ul id="demo">
 <li>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
 </li>

 <li>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
 </li>
</ul>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

如何以编程方式让我的两个<li> 标签拥有自己的按钮，只显示其内部的内容？

我知道我可以添加另一个名为show2 的数据对象并将按钮修改为<button v-on:click="show2 = !show2">，但这是一个手动过程，我不想每次添加新的<li> 时都必须这样做。

如何在 Vue 中以编程方式实现这一点？

谢谢

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您应该创建另一个组件，让我们调用Togglable。您可以使用 props 或使用插槽传递内容，如文档 here 中所示

使用新组件，您可以将它用于每个 li。如果您的数据也是动态的，请检查v-for。

它看起来类似于：

<togglable content="hello" button-name="Toggle"></togglable>

【讨论】：