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>

现在我使用

tagClass（tag）

切换类：

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

现在，在获取更新页面时，我将值放入

current标记和
selectedTag中，如下所示：

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

现在我可以查看从父项中选择的子标记，但无法在其中选择类。我希望设置为
seletedTag
的数据应具有class
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
永远不会等于任何标记。相反，请查找本地的
标记
，该标记与从服务器收到的
标记
匹配

无论你在哪里做这件事

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)

.
您能展示一个
响应.data
的示例，以及您正在使用的包含
this.currentTag=response.data.contact.parentTag
的方法吗？您好，谢谢您的回答，您希望我像您在示例中所做的那样将其放置在
mounted（）
中，并且我已经在
数据（）中定义了
selectedTag
那么为什么还要用const定义呢。@NitishKumar您现在可能在任何地方都可以这样做。我只是为了方便而在那里做的。仍然没有解决，我正在以数组格式在后端传递
selectedTag
。我已经更新了问题，请查看。@NitishKumar我不使用php做任何事情。你能告诉我们JSON是如何在客户端运行的吗？这就是问题所在，我使用的是数组格式的数据，而不是JSON格式的数据。让我通过将格式更改为json进行检查
this.currentTag = response.data.contact.parentTag
const selectedTag = response.data.contact.selectedTag
this.selectedTag =  this.tags[this.currentTag].find(t => t.value === selectedTag.value)