在同一页面上多次使用VueJS组件（并且它仅在第一次使用时...）

Question

我刚刚发现VueJS而我只是在我的应用中添加了一些内容（我不使用CLI，只需将Vue库添加到我的{ {1}}）。

我无法在同一页面上多次使用相同的index.html。

我有以下简化component（我使用html模板引擎）：

EJS

我的<% for (var i = 0; i < data.length; i++) { %> <li><%= data[i].id %></li> <span class='sendBV'> <button v-on:click='seen = !seen'> Toggle </button> <div v-if='seen'> I'M SEEN </div> </span> <% } %> 脚本是：

Vue

问题是Vue仅对第一个数据项工作。 你有任何线索，我没有在网上找到任何答案。 THX。

Answer 1

这是因为Vue实例只会挂载一个DOM元素。

因此，在您的情况下，Vue挂载到第一个元素匹配int p=0 ; int q=0; int r=0 ; int.TryParse(textBoxOne.Text,out p); int.Parse(textBoxTwo.Text,out q); int.Parse(textBoxThree.Text, out r); 。

我建议使用组件解决问题

1。定义组件

.sendBV

2。在你的ejs

Vue.component('send-bv', {
  template: `
    <span class='sendBV'>
      <button v-on:click='seen = !seen'> Toggle </button>
      <div v-if='seen'> I'M SEEN </div>
    </span>
  `,
  data: function () {
    return {
      seen: false
    };
  }
});
new Vue({
  el: '#vue-app'
});

完整示例代码：https://codepen.io/iampaul83/pen/XZxrVp