Vue.js传入函数的数据未变更，toggle功能失效求助

看起来你遇到的是Vue响应式系统没正确追踪属性变化的典型问题——点击按钮时明明修改了show属性，但它总是“回弹”回初始的false状态，我来帮你拆解常见原因和修复方案：

常见问题1：修改的是对象副本而非原数组中的对象 #

如果你的模板或toggle函数里不小心传递了对象的副本（比如用了展开运算符{...ninja}），那你修改的只是临时生成的新对象，原数组里的Ninja数据根本没变化，自然每次点击都会看到show还是初始值。

错误代码示例： #

<template>
  <div v-for="ninja in ninjas" :key="ninja.id">
    <!-- 传递了对象副本，导致修改无效 -->
    <button @click="toggle({...ninja})">Toggle Specialty</button>
    <p v-if="ninja.show">{{ ninja.specialty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ninjas: [
        { id: 1, name: 'Naruto', specialty: 'Rasengan', show: false },
        { id: 2, name: 'Sasuke', specialty: 'Chidori', show: false },
        // ...其他4个Ninja对象
      ]
    };
  },
  methods: {
    toggle(ninja) {
      ninja.show = !ninja.show;
      console.log(ninja.show); // 这里修改的是副本，原数据毫无变化
    }
  }
};
</script>

修复方案：直接传递原对象 #

把模板里的点击事件改成传递原Ninja对象，这样修改的就是数组里的真实数据，Vue会自动响应更新：

<button @click="toggle(ninja)">Toggle Specialty</button>

常见问题2：show属性是后续添加的，未被Vue响应式追踪 #

如果你的Ninja对象一开始没有show属性，是在组件挂载后才手动添加的，Vue默认无法检测到这种新增属性的变化，导致修改后模板不更新，看起来show属性没变化。

错误代码示例： #

data() {
  return {
    ninjas: [
      { id: 1, name: 'Naruto', specialty: 'Rasengan' },
      // 初始没有show属性
    ]
  };
},
mounted() {
  // 直接添加属性，Vue无法追踪其变化
  this.ninjas.forEach(ninja => ninja.show = false);
}

修复方案：用this.$set添加响应式属性 #

修改挂载时的代码，使用Vue提供的$set方法来添加属性，确保它被响应式系统追踪：

mounted() {
  this.ninjas.forEach(ninja => {
    this.$set(ninja, 'show', false);
  });
}

或者更简单的方式：一开始就在每个Ninja对象里定义show: false，从根源避免响应式追踪问题。

验证修复效果 #

修改后，点击Toggle按钮时，你会看到show属性正确在true和false之间切换，模板里的专长内容也会随之显示/隐藏。

内容的提问来源于stack exchange，提问作者David Mathers