如何更改内部属性

Question

我想做一个标题按钮的类型:

如果我调用headerfunction;那么所有选中的都将为假，只有我点击的一个将为真。并观察所选属性=>如果选定的属性为真，则:class将被"选定";所有其他被选中的假属性都将是&;nonselected&;类…

我该如何处理呢?

<template>
<button 
type="button" 
selected="true"  
:class="selected" 
@click='HeaderFunction'
>
first button
</button>
<button 
type="button" 
selected="false" 
:class="nonselected" 
@click='HeaderFunction'
>
second button
</button>
</template>

<script>
export default {
data(){
return{
selected:'btn btn-success btn-sm',
nonselected:'btn btn-danger btn-sm',
}
},
methods: {
callFunction: function (event) {
var selected = event.target.getAttribute('selected');
return  alert (selected);
}
}
}
</script>

Answer 1

你需要一个数组和变量来保存当前活动的按钮:

<template>
<button v-for="(item,index) in headerList" :key="index" :class="currentButtonIndex === index ? selected : unselected" @click="chooseHeader(index)">{{ item }}</button>
</template>
<script>
export default
{
data()
{
return {
currentButtonIndex: -1,
selected: 'btn btn-success btn-sm',
unselected: 'btn btn-danger btn-sm',
}
},
computed:
{
headerList()
{
return [
'First button',
'Second button',
]
}
},
methods:
{
chooseHeader(index)
{
this.currentButtonIndex = index;
}
}
}
</script>