Vue中更新JSON对象属性后输入框未同步更新问题求助

核心问题分析 #

1. 违反单向数据流规则：Vue中props是父组件向子组件传递数据的通道，子组件不应该直接修改props，所有props的更新都应该由父组件发起。直接修改props会导致数据流向混乱，且Vue的响应式系统可能无法正确触发视图更新。
2. 字面量对象的响应式问题：父组件中直接传递{name: 'something', type: 1}这种字面量对象，该对象并非父组件的响应式数据，即使子组件修改了其属性，父组件也不会感知到变化，进而导致子组件视图无法同步更新。

规范解决方案：遵循单向数据流 #

步骤1：父组件将blaa定义为响应式数据

父组件中把传递的对象转为响应式，确保属性变化能被Vue追踪：

<template>
  <some-builder :blaa="blaa" @update-type="handleUpdateType"></some-builder>
</template>

<script>
export default {
  data() {
    return {
      // 定义为响应式数据
      blaa: { name: 'something', type: 1 }
    }
  },
  methods: {
    handleUpdateType(newType) {
      // 父组件负责更新props数据
      this.blaa.type = newType;
    }
  }
}
</script>

步骤2：子组件通过事件通知父组件更新

子组件不直接修改props，而是通过$emit触发事件，同时用计算属性绑定输入框，实现双向同步：

<template>
  <input type="text" v-model="localType" />
  <button type="button" @click="selectType('1')">1</button>
  <button type="button" @click="selectType('2')">2</button>
  <button type="button" @click="selectType('3')">3</button>
</template>

<script>
export default {
  props: ["blaa"],
  computed: {
    localType: {
      // 从props获取当前值
      get() {
        return this.blaa.type;
      },
      // 输入变化时通知父组件更新
      set(newVal) {
        this.$emit('update-type', newVal);
      }
    }
  },
  methods: {
    selectType(t) {
      this.$emit('update-type', t);
    },
  },
};
</script>

临时应急方案（不推荐） #

如果只是临时调试，不想修改父组件代码，Vue2中可以用$set强制触发响应式更新（Vue3中可直接修改，但仍违反单向数据流）：

methods: {
  selectType(t) {
    // Vue2中用$set更新对象属性，确保响应式追踪
    this.$set(this.blaa, 'type', t);
    console.log(this.blaa);
  },
},

⚠️ 注意：此方案仅用于临时测试，长期维护会导致数据流向混乱，建议优先使用规范方案。

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