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

Question

在 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;

Answer 1

这里的问题是 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 .