VueJS更新調用後簡單方法不工作

Question

我想動態更改按鈕的顏色，當我點擊它們。因此，我添加了一個只在屬性isActive設置爲true時才分配的自定義類「活動」。點擊我想調用一個方法，將屬性更改爲true，然後更新dom以添加自定義類。任何幫助表示讚賞;）

<div v-for="(funktion, index) in funktions"> 
      <button class="btn btn-default wordcloud" 
        :class="{ 'custom-active': funktion.isActive }" 
        @click="activate(index)">{{funktion.name}}</button> 
</div> 

的方法正確地更新數據，但DOM不更新

export default { 

    data() { 
    return { 
     funktions: [ 
      { 
      name: "finanzen", 
      isActive: false 
      }, 
      { 
      name: "management", 
      isActive: false 
      }, 
      { 
      name: "testfield", 
      isActive: false 
      }, 
     ], 
    }; 
    }, 
    methods: { 
    activate(index){ 
     this.funktions[index].isActive = true; 
    }, 
}; 

Answer 1

你沒有通過索引到activate回調。將其更改爲：

@click="activate(index)">{{funktion.name}}</button> 

如果您在控制檯看你有會給你一個線索，因爲你試圖訪問某個項目的數組與非數字的例外。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     funktions: [ 
 
      { 
 
      name: "finanzen", 
 
      isActive: false 
 
      }, 
 
      { 
 
      name: "management", 
 
      isActive: false 
 
      }, 
 
      { 
 
      name: "testfield", 
 
      isActive: false 
 
      }, 
 
     ], 
 
    }; 
 
    }, 
 
    methods: { 
 
    activate(index){ 
 
     this.funktions[index].isActive = true; 
 
    }, 
 
\t }, 
 
})

.custom-active { 
 
    background-color: red; 
 
}

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="app"> 
 
    <div v-for="(funktion, index) in funktions"> 
 
    <button class="btn btn-default wordcloud" 
 
     :class="{ 'custom-active': funktion.isActive }" 
 
     @click="activate(index)">{{funktion.name}}</button> 
 
    </div> 
 
</div>