VueJs 属性未显示在模板中但存在于数据中答案

【问题标题】：VueJs property not displaying in template but exists in dataVueJs 属性未显示在模板中但存在于数据中
【发布时间】：2019-11-09 20:13:13
【问题描述】：

大家好，我对 vueJS 有疑问。

在创建的钩子中我有这个：

created() {
      var allDocs = [];
      for (var [key, value] of Object.entries(this.docs)) {
        allDocs.push(value);
      }
      allDocs = allDocs.flat();
      allDocs.forEach((doc)=>{
        var data = {parent:doc.code}
        axios.post('/api/v1/getconnumber', data)
        .then((response)=>{
          doc.datas.conventions = response.data
        });
      });
      this.newDocs = allDocs;
    }

并且该属性存在于数据中：

但是当我想在模板中显示该属性时，它什么也没显示，我厌倦了从它给我undefined 的模板中记录结果，我确定这是一个 async 问题但我不知道如何解决它。

【问题讨论】：

能否分享一下数据属性代码？
还有模板代码。

标签： javascript vue.js vuejs2 axios

【解决方案1】：

这里有几个问题需要解决。

axios 调用是异步的，所以在 created 函数完成运行时，then 回调将不会被调用。其余代码将运行，因此 newDocs 将被分配一个值，只是 conventions 属性不会被设置。

然后组件渲染。正如您所观察到的，此时conventions 将是undefined。要避免这种情况，您无能为力，您只需要编写模板来处理丢失的数据。有多种方法可以解决问题，以便在不同的地方处理它，但最终必须处理它。

接下来 axios 调用会一一返回。每次调用完成时，它将更新该特定对象的 conventions 属性。

理论上这会触发反应系统并导致组件重新渲染。但是，要做到这一点：

datas 对象必须是响应式的。
属性conventions 必须已经存在于这些对象中。见https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

条件 1 很可能已经满足。问题中没有明确说明docs 和newDocs 属性的确切定义位置，但我的猜测是docs 是一个道具，newDocs 是一个本地data 属性。在确定datas 是否具有反应性时，这里有很多细微的差别，但如果你在data 函数中声明了newDocs，那么你应该没问题。即使您没有在那里声明它，您也可能会侥幸逃脱，但我还是建议您包含它。

data () {
  return {
    newDocs: null
  }
}

更有可能是您的问题是由于 conventions 属性在 datas 最初被激活时不存在。这里最简单的解决方案是使用Vue.set 或$set：

this.$set(doc.datas, 'conventions', response.data)

通过使用$set，您不仅可以设置属性值，还可以使其具有响应性。这将允许它触发模板，以便您看到新值。

综上所述，以这种方式更新conventions 属性似乎有点奇怪。似乎它正在更新父组件拥有的对象，这通常是不鼓励的。替代解决方案包括使用计算属性或为约定创建查找图。

【讨论】：

【解决方案2】：

我在 for 循环中调用 axios 时遇到了类似的问题。尝试在您的请求完成后将您的分配“this.newDocs = allDocs;”。

我在一个变量上使用了一个观察者，这个变量的大小达到了我的最大 for 循环计数的大小。或者你可以尝试把它放到“then((response)=>{...}”中。

【讨论】：