我有一个搜索栏，它以
的形式返回来自API查询的数据Data: [[id, datafield1, datafield2]，[id, datafield1, datafield2]，…]
我想为每一行数据添加一个开/关按钮。每个按钮都应该有一个独立的方式来告诉它是关闭还是打开。我以后会给它添加更多的功能，我喜欢它的外观，所以如果可能的话，我想坚持使用v-btn。
按钮逻辑为
<v-btn
color="primary"
variant="outlined"
@click="trackBill"
>{{ this.trackedBtnText }}</v-btn
>
脚本为
<script>
export default {
data: () => ({ bills: [], trackedBtnText: 'Track', tracked: false }),
methods: {
async showBills() {
this.bills = await showBills(this.keywords);
},
trackBill() {
this.tracked = !this.tracked;
this.trackedBtnText = this.tracked ? 'Tracked' : 'Track';
},
},
};
</script>
当我点击一个按钮时，每个按钮上的文本都会改变。我想要一些方法来维持每个函数的独立变量。他们将在开发过程的后期根据他们获得的数据进行API查询，所以如果他们也能保存其他数据就太好了。
每当您需要多次执行某事时，请努力使用v-for。不要重复不必要的代码。
只需将配置数据放入数组中的对象中。包括你需要定义一个按钮的一切，即标题，状态，CSS类，你需要查询的数据，等等:
buttonData: [
{title: 'Column 1', checked: false},
{title: 'Column 2', checked: true},
{title: 'Column 3', checked: false},
]
那么你可以使用v-for来绘制按钮:
<v-btn
v-for="button in buttonData"
:key="buttonData.title"
@click="$event => button.checked = !button.checked"
>
{{ button.title + ' is ' + (button.checked ? 'on' : 'off') }}
</v-btn>
你可以通过数组访问按钮的状态。
请注意，按钮并不是真正用来作为拨动开关的。你可以考虑使用开关或复选框。
下面是一个代码片段(不确定您使用的是Vue 2还是Vue 3，所以我选择了Vue 2，但这并不重要)
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return {
buttonData: [
{title: 'Column 1', checked: false},
{title: 'Column 2', checked: true},
{title: 'Column 3', checked: false},
]
}
}
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-btn
v-for="button in buttonData"
:key="buttonData.title"
:color="button.checked ? 'primary' : 'secondary'"
class="ma-4"
@click="$event => button.checked = !button.checked"
>{{ button.title + ' is ' + (button.checked ? 'on' : 'off') }}</v-btn>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>