将道具传递给 Vue 3 Typescript 中的数据对象

Question

我有一个 Vue 组件（table），它通过 props 接收一组对象。现在我想删除、添加或编辑此数组中的一些条目，但我不能这样做，因为该道具是只读的。所以我想在收到属性后，我只是将那个东西复制到所述组件的数据部分中的一个对象中，我应该可以编辑它，但我还没有找到如何去做。

说 items 是我的属性而 ditems 是我的数据对象

  data() {
    return { ditems: this.items };
  },

不工作，

也不工作

  data() {
    let pitems = Object.assign({}, this.items);
    return { ditems };
  },

所以我运行没有想法，我希望有人能帮助我提前感谢您的宝贵时间

Answer 1

当您尝试编辑道具值时，使用 Object.assign() 或 JSON.parse(JSON.stringify()) 复制道具是正确的（顺便说一句，我推荐 JSON 解析方式）。

但是，复制方法最好放在 watch 而不是 data() 中，因为 prop 数据最初可能是空的，并且在 api 请求或其他东西之后带有数据.所以你最好这样做：

data() {
  return {
    ditems: {}
  }
}
watch: {
  items: {
    handler(val) {
      if (Object.keys(val).length) { // check whether items data is empty
        this.ditems = JSON.parse(JSON.stringify(val))
      }
    },
    deep: true
  }
}

顺便说一下，您使用的似乎是 Vue2，因为 Vue3 使用 setup() 而不是 data()。

将道具传递给 Vue 3 Typescript 中的数据对象

Passing a prop to data object in Vue3 Typscript

javascript

node.js

typescript

vue.js

vuejs3