在 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 .
关于javascript - 如何在vue js的更新页面中选择类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44163672/