vue jsの複数の要素のクラスを切り替える方法

Question

Vuejs 2.0の複数の要素のクラスを切り替える際に、btn-primaryのクラスを持つ次のボタンがあります。ボタンをクリックすると、その特定の要素のサブグループが表示されます。これは私のコードです：私はdata()に次き

<div v-if="tag.investor"> 
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Mutual Funds')">Mutual Fund</button> 
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Insurance')">Insurance</button> 
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - FII')">FII</button> 
</div> 
<div v-if="tag.research"> 
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier I')">Research - Tier I</button> 
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier II')">Research - Tier II</button> 
</div> 

：

tag: { 
    investor: false, 
    research: false, 
    company: false, 
    others: false, 
}, 

そしてmethods中：

getTags: function (tag) { 
    this.tag.investor = this.tag.research = this.tag.company = this.tag.others = false 
    if(tag == 'investor') 
    { 
     this.tag.investor = true 
    } 
    if(tag == 'research') 
    { 
     this.tag.research = true 
    } 
    if(tag == 'company') 
    { 
     this.tag.company = true 
    } 
    if(tag == 'others') 
    { 
     this.tag.others = true 
    } 
}, 

<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('investor')">Investor</button> 
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('research')">Research</button> 
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('company')">Company</button> 

これは、次の要素を示しています10子要素が選択されたら、btn-warningのクラスを持ち、btn-primaryを削除します。どのようにこれを実装するためのアイデア、私は個々のデータ要素を持って、クラスを切り替えるしたくないです。

Answer 1

私はあなたのVueにデータ駆動型アプローチを提案したいと思います。

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 id="app"> 
    <button v-for="(obj, key) in tags" 
      :key="key" 
      @click="currentTag = key" 
      class="btn btn-xs btn-primary"> 
    {{key}} 
    </button> 

    <div> 
    <button v-for="tag in tags[currentTag]" 
      :key="tag" 
      class="btn btn-xs" 
      :class="tagClass(tag)" 
      @click="selectTags(tag.value)"> 
     {{tag.display}} 
    </button> 
    </div> 
</div> 

あなたのVueもきれいに見えます。

new Vue({ 
    el:"#app", 
    data:{ 
    currentTag: null, 
    tags, 
    selectedTags:[] 
    }, 
    methods:{ 
    selectTags(tag){ 
     const index = this.selectedTags.findIndex(t => t == tag) 

     if (index >= 0) 
     this.selectedTags.splice(index, 1) 
     else 
     this.selectedTags.push(tag) 
    }, 
    tagClass(tag){ 
     const isSelected = this.selectedTags.includes(tag.value) 

     return { 
     'btn-warning': isSelected, 
     'btn-primary': !isSelected 
     } 
    } 
    } 
}) 

ここにはexampleがあります。

Answer 2

v-bind:classディレクティブを使用できます。

<button 
    class="btn btn-xs" 
    v-bind:class="{ 'btn-warning': tag.research, 'btn-primary': !tag.research }" 
    v-on:click.prevent="selectTags('Research - Tier I')" 
> 
    Research - Tier I 
</button>