Vue, filter property on Observable

Question

I'm pretty new to Vue, what I'm doing now is the following.

I receive an Item prop in my component, I spread this Item prop out over a Form data object that's defined in my component (as to have reactivity)

data() {
  return {
    form: {}
  }
mounted () {
  this.form = {
    ...this.item,
    translations: { ...this.item.translations }
  }
},

Now my local form data holds the information, including reactive translations, right?

Next thing I try to do is filter this data, but then it's failing me. If I console.log(this.form). It is an Observable (see screenshot)

Is there a way to filter, reduce, map on this 'Observable'? Am I doing 'reactivity' the right way?

Answer 1

将项目分配给this.form之前，请尝试clone / deepClone。

Answer 2

You can access props from data() directly.

 data() { return { form: { ...this.item, translations: { ...this.item.translations } } } }, computed: { getForm() { // use filter/map method here, eg // return this.form.filter((item) => { ... }) } }