调用简单方法后VueJS更新Dom不起作用

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;
    },
	},
})

.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>