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

Question

我想在单击按钮时动态更改按钮的颜色。因此，我添加了一个自定义类"active"，该类仅在属性 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>