Vue.js Vuejs多个活动按钮

我正在尝试创建一个列表，其中每个列表项都包含一个按钮，我希望用户能够单击多个按钮。我正在生成我的列表，如下所示：

    <ul>
      <li v-for="item in items" :key="item.id">
        <button type="button">{{item.title}}</button>
      </li>
    </ul>

你知道我如何允许点击多个按钮吗

---

为了让事情更清楚一点，我稍后将创建一个AJAX调用，并传递单击按钮的每个项目的

item.id

使用列表项目的id属性使其唯一

<ul>
    <li v-for="item in items" :key="item.id" :id="item.id">
        <button type="button" @click="doThis">{{item.title}}</button>
    </li>
</ul>


new Vue({
  el: '#app',
  data: {},
  methods: {
      doThis() { 
          // Use this to access current object
      }
  }
});

{{item.title}


新Vue({
el:“#应用程序”，
数据：{}，
方法：{
doThis（）{
//使用此选项访问当前对象
}
}
});

如果可能的话，我宁愿避免改变数据结构

您必须将单击的

项

存储在某个位置

如果无法编辑

项

数组，则始终可以创建一个新数组，如存储这些值的

isClicked

newvue({
el:“#应用程序”，
数据：{
项目：[{
id:1，
标题：“富”
},
{
id:2，
标题：“酒吧”
},
{
id:3，
标题：“baz”
}
],
单击：[]
},
beforeMount（）{
//将所有值设置为false
this.items.forEach（（item，index）=>this.set（this.isClicked，index，false））
},
方法：{
单击（索引）{
//切换活动类
this.$set（this.isClicked，index，！this.isClicked[index]）
}
}
})

.active{
背景：红色
}

{{item.title}

将另一个对象添加到

项

，如默认情况下单击

isClicked

，其中为

false

。然后在你的click方法上，比如

clicked

，将该值设置为true并附加一些带有某些样式的类。我们希望不会得到这个答案。如果可能的话，我宁愿避免改变数据结构

<ul>
    <li v-for="item in items" :key="item.id" :id="item.id">
        <button type="button" @click="doThis">{{item.title}}</button>
    </li>
</ul>


new Vue({
  el: '#app',
  data: {},
  methods: {
      doThis() { 
          // Use this to access current object
      }
  }
});