在 Vue 3 Typescript 中将道具传递给数据对象答案

【问题标题】：Passing a prop to data object in Vue3 Typscript在 Vue 3 Typescript 中将道具传递给数据对象
【发布时间】：2021-12-31 15:53:16
【问题描述】：

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

说items 是我的财产，ditems 是我的数据对象

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

没有工作，也没有

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

所以我的想法已经不多了，我希望有人可以帮助我提前感谢您的宝贵时间

【问题讨论】：

对项目进行深层复制，即ditems: JSON.parse(JSON.stringify(this.items))，然后在您进行更改时使用this.$emit('update', this.ditems)，或者使用modelValue prop 和v-model 或使用vuex 代替
@LawrenceCherone 使用 vuex 是什么意思？我该怎么做？
将项目提交到商店，然后您不传递道具，并在您进行更改时将它们提交回

标签： javascript node.js typescript vue.js vuejs3

【解决方案1】：

当您尝试编辑 props 值时，您可以使用 Object.assign() 或 JSON.parse(JSON.stringify()) 复制 props 是正确的（顺便说一句，我推荐 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()。

【讨论】：

你指的是组合API，这两种语法在Vue 3中都是有效的。