Vue.js中通过PHP初始化传入的prop失去响应性该如何解决

首先明确问题核心：Vue遵循单向数据流规则，Props仅用于父组件向子组件传值，不允许在子组件内部直接修改Prop本身，你直接修改props里的items数组不会触发Vue的响应式更新，而写在data()里的是组件本地的响应式数据，所以修改后可以正常触发视图更新。

修复步骤 #

• 父组件将接收到的items Prop转存为本地响应式数据，后续所有增删改操作都针对本地数据执行
• 如果需要支持Prop后续变更同步到本地，可加watch监听items Prop的变化

修改后的父组件代码 #

<template>
  <!-- 遍历本地的localItems而非props传入的items -->
  <my-list-item
    v-for="item of localItems"
    :key="item.id"
    :item="item"
    @remove="removed"
  ></my-list-item>
  <br />
</template>

<script>
import MyListItem from './my-list-item'

export default {
  name: "my-list",
  components: {
    MyListItem
  },
  data() {
    return {
      // 定义本地响应式数组，初始值为props传入的items
      localItems: this.items ?? []
    }
  },
  props: {
    items: {
      type: Array,
      default: undefined
    }
  },
  // 可选：如果后续父组件会更新传入的items，加这段同步到本地
  watch: {
    items(newVal) {
      this.localItems = newVal ?? []
    }
  },
  methods: {
    removed: function (item) {
      // 操作本地的响应式数组
      _.remove(this.localItems, item);
    }
  }
};
</script>

其他说明 #

如果需要把修改后的列表同步回后端，在修改localItems之后加对应的接口请求即可，前端响应式更新不受影响。

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