在 Vue3 Typscript 中将道具传递给数据 object

Question

I have a Vue component (a table) which receives an array of objects via props. Now I want to delete, add or edit some entries in this array but I cant do that as the prop is ready-only. So I thought upon receiving the property I just copy that thing into an object in the data-section of said component, which i should be able to edit but I havent found out how to do it.

Say items is my property and ditems is my data object

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

isnt working and neither is

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

so I'm running out of ideas and I hope someone can help me Thanks in advance for your time

Answer 1

When you try to edit the props value, you are right about duplicate the prop by either using Object.assign() or JSON.parse(JSON.stringify()) (I recommend the JSON parse way btw).

However, the duplicate method is better put within watch instead of data() , given the prop data might be empty initially, and comes with data after an api request or something. So you'd better do this:

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
  }
}

And by the way, what you are using seems like Vue2, since Vue3 uses setup() instead of data() .

Answer 2

If you are using Vue3 there is a utility provided already for this toRef .

import { toRef } from "vue";
export default {
  props: {
    items: Object
  },
  setup(props) {
    return {
      ditems: toRef(props.items)
    };
  }
}

If you are using Vue2 you have to clone the prop and pass it to ditems. In this example I use a clone method from library lodash:

import cloneDeep from "lodash.clonedeep"
export default {
  props: {
    items: Object
  },
  data() {
    return { ditems: cloneDeep(this.items) };
  }
}

You can use different clone methods but beware about the accepted solutions.

JSON.parse(JSON.stringify())

JSON.stringify() will encode values that JSON supports. Objects with values that can be objects, arrays, strings, numbers and booleans. So if you have a function, it's not going to be cloned or if you have a Date Object it is going to be a String after cloning.

On the other hand

Object.assign()

is only going to make a shallow copy .