javascript - 如何在vue js的更新页面中选择类

在Vuejs 2.0中，我有以下数据集：

const tags = {
   Investor:[
     {display:"Mutual Fund", value:"Investor - Mutual Funds"},
     {display:"Insurance", value:"Investor - Insurance"},
     {display:"FII", value:"Investor - FII"},
   ],
   Research:[
     {display:"Research - Tier I", value:"Research - Tier I"},
     {display:"Research - Tier II", value:"Research - Tier II"},
  ]
}

我有以下显示这些标签的按钮集：

<div class="col-sm-4 border-right">
    <div>
        <button v-for="(obj, key) in tags"
                :key="key"
                @click.prevent="currentTag = key"
                class="btn btn-primary btn-xs">
            {{key}}
        </button>
    </div>
</div>
<div class="col-sm-6">
    <div>
        <button v-for="tag in tags[currentTag]"
                :key="tag"
                class="btn btn-xs"
                :class="tagClass(tag)"
                @click.prevent="selectedTag = tag">
            {{tag.display}}
        </button>
    </div>
</div>

为了获得选定的标签，我有一个名为：

currentTag: '',
selectedTag: '',

现在，我要使用tagClass(tag)来切换课程：

tagClass(tag){
    return {
        'btn-warning': this.selectedTag === tag,
        'btn-primary': !(this.selectedTag === tag)
    }
},

现在，在获取更新页面时，我将值放在current tag和selectedTag中，如下所示：

this.currentTag = response.data.contact.parentTag
this.selectedTag = response.data.contact.selectedTag

现在，我可以查看从父级选择的子级标记，但是无法在其中选择类。我希望被设置为seletedTag的数据应具有类btn-warning
在后端PHP中，我正在计算并将值传递为

$selectedTag['value'] = $contact->tag;
$tags = explode('-', $contact->tag);
$contact->parentTag = $tags[0];
$selectedTag['display'] = $tags[1];
$contact->selectedTag = $selectedTag;

最佳答案

这里的问题是tagClass方法正在检查tag是否等于selectedTag。由于tag和selectedTag是对象，因此，当您手动设置它们时，selectedTag永远不会等于任何标签。而是，在本地查找与从服务器收到的tag匹配的tag。

无论您在哪里这样做

this.currentTag = response.data.contact.parentTag
this.selectedTag = response.data.contact.selectedTag

改成这个

this.currentTag = response.data.contact.parentTag
const selectedTag = response.data.contact.selectedTag
this.selectedTag =  this.tags[this.currentTag].find(t => t.value === selectedTag.value)

Example。