CODEWITHSUNDEEP
javascriptvue.js
JillAndMe
JillAndMe

Reputation: 4551

Array prop returns Observer so can't access at [0]

I passed Array but got Observer here's my code:

In Component1

data() {
   return {
     myWords: [],
        }
   }
//...
await axios.post(this.serverUrl + router, {
            voca: text,
            category: this.buttonGroup.category.text
          })
          .then(res => {
            this.myWords.push({
              voca: this.voca,
              vocaHeader: this.vocaHeader,
              category: res.data.savedVoca.category,
              date: res.data.savedVoca.date,
              id: res.data.savedVoca._id
              })
            this.myWords.push({voca:"test"})
          })
          .catch(err => {
            console.log(err)
          })

In Component2 

 props: {
      myWordsProp: {
        type: Array,
        default: () => ([])
      },
    },
mounted() {
    console.log(this.myWordsProp)
    console.log(this.myWordsProp[0]) //returns undefined
},

And I expected an Array but I get Observer so I can't get values from this.myWordsProp[0] why? 

//this.myWordsProp
[__ob__: Observer]
0: {
  category: "ETC"
  date: "2018-11-21T15:31:28.648Z"
  id: "5bf57a503edf4e0016800cde"
  voca: Array(1)
  vocaHeader: Array(1)
  ... 
  }
1: {__ob__: Observer}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array

//this.myWordsProp[0]
undefined

I found a clue that when I test it outside of axios it worked as I expected.

Upvotes: 1

Views: 1046

Answers (2)

Steven Spungin
Steven Spungin

Reputation: 29071

Vue wraps data and props into reactive objects. Use vue-devtools plugin in your browser as an alternative to viewing the ugly observer in the console.

In your code, the object behaves correctly. It’s only in the console that it ‘looks’ different.

Anyway, you can also click on the ... to expand the node and get the value from the console.

https://github.com/vuejs/vue-devtools

Upvotes: 2

JillAndMe
JillAndMe

Reputation: 4551

I found a solution It's because of sending props before get data from server.

This is my whole of postVocas function It returns promise

postVocas: function (voca) {
        if (!voca || voca.length < 1) return
        let router = "/api/voca"

        let text = ""
        text += `${this.vocaHeader[0].english}, ${this.vocaHeader[0].korean}\n`
        voca.forEach((x, index) => {
          text += `${voca[index].english}, ${voca[index].korean}\n`
        })

        return axios.post(this.serverUrl + router, {
          voca: text,
          category: this.buttonGroup.category.text
        }).then(res => {
          this.myWords.push({
            voca: this.voca,
            vocaHeader: this.vocaHeader,
            category: res.data.savedVoca.category,
            date: res.data.savedVoca.date,
            id: res.data.savedVoca._id
          })
        }).catch(err => {
          console.log(err)
        })
      },

And await till get data from server. This one is function where execute My postVocas function.

  sendVocaToTable: async function () {
    let reformedText = this.reformText(this.text)
    this.voca = this.formatTextToVoca(reformedText)

    await this.postVocas(this.voca)

    this.$router.push({
      name: 'Table',
      params: {
        vocaProp: this.voca,
        tableHeaderProp: this.vocaHeader
      }
    })
  },

Upvotes: 0

Related Questions