Javascript 数组道具返回观测者以便可以'；t在[0]访问

我通过了数组，但得到了观察者这是我的代码：

在组件1中

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

在组件2中

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

我需要一个数组，但我得到了Observer，因此无法从中获取值。MyWordsPro[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之外测试它时，它就像我预期的那样工作。

Vue将数据和道具包装到反应对象中。在浏览器中使用

vue devtools插件

，以替代在控制台中查看

丑陋的观察者

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

无论如何，您也可以单击

…

展开节点并从控制台获取值

---

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

这是我的全部postVocas函数，它返回承诺

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

---

你是说vue devtool for chrome？我试着启动它并刷新我的网页，但仍然没有改变，无法获得它。MyWordsPro[0]是的，开发工具。他们在另一个窗口打开。你对chrome的控制台无能为力…我试过开发工具，但不知道为什么我不能得到它。MyWordsPro[0]…你试过挂载的原始语法了吗@穆卡，格格利，你什么意思？

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