VueJS新增数组项后点击无法激活active状态问题

我帮你定位到了新条目无法激活的核心问题，是两个小细节没处理好：

问题1：新条目未初始化active状态 #

你创建新条目时只设置了name和price，但没有给active属性赋值。Vue无法追踪未提前声明的属性变化，这就导致点击新条目时，active状态根本没法切换。

问题2：addItem方法中错误调用了toggleActive() #

在添加新条目的方法里，你调用了toggleActive()却没传任何参数，这会让方法里的f变成undefined，不仅完全无效，还会在控制台抛出报错。而且刚添加的条目本来就不需要立刻激活，这个调用完全多余。

修复后的完整代码 #

var demo = new Vue({
  el: '#main',
  data: {
    services: [
      { name: 'Item 1', price: 200, active: true },
      { name: 'Item 2', price: 500, active: false },
      { name: 'Item 3', price: 700, active: false }
    ],
    name: "", // 别忘了提前声明这两个绑定输入框的data属性
    price: ""
  },
  methods: {
    addItem: function() {
      var newItem = { 
        name: this.name, 
        price: this.price, 
        active: false // 初始化active为false，确保Vue能追踪这个属性
      };
      this.services.push(newItem);
      this.name = "";
      this.price = "";
      // 移除多余的toggleActive()调用
    },
    toggleActive: function(f) {
      f.active = !f.active;
    },
    total: function(){
      var total = 0;
      this.services.forEach(function(f){
        if(f.active){
          total += f.price;
        }
      });
      return total;
    }
  }
});

额外模板提醒 #

还要确保你的HTML模板正确绑定了输入框，比如：

<input v-model="name" placeholder="输入条目名称">
<input v-model.number="price" placeholder="输入价格" type="number">
<button @click="addItem">添加条目</button>

这样才能正确获取输入值并创建新条目。

现在再添加新条目后，点击它就能正常切换active状态，条目会变成蓝色，总价也会自动把激活的条目计算进去啦！

内容的提问来源于stack exchange，提问作者Donnie Berry