Question

我通过了Array，但是得到了Observer，这是我的代码：

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

在Component2中

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

我期望有一个数组，但是我得到了Observer，所以我无法从this.myWordsProp [0]中获取值，为什么？

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

我发现一个线索，当我在axios之外进行测试时，它可以按预期工作。

Answer 1

Vue将数据和道具包装到反应对象中。在浏览器中使用vue-devtools plugin代替在控制台中查看ugly observer。

在您的代码中，对象的行为正确。只是在控制台中，它看起来“有所不同”。

无论如何，您还可以单击...来展开节点并从控制台获取值。

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

Answer 2

我找到了解决方案，这是因为在从服务器获取数据之前发送了道具。

这是我整个postVocas函数，它返回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)
        })
      },

等待直到从服务器获取数据。这是一个执行My postVocas函数的函数。

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

数组道具返回观察者，因此无法在[0]访问

2 个答案: