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>