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

Question

大家好，我对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的模板的结果，我确定这是一个异步

Answer 1

这里要解决一些问题。

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

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

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

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

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

条件1可能已经满足。这个问题尚不清楚，确切说明了属性docs和newDocs的定义位置，但我的猜测是docs是一个道具，newDocs是一个本地{{1 }}属性。在确定data是否会做出反应时，这里有很多细微差别，但是如果您在datas函数中声明了newDocs，那么您应该没事。即使您没有在其中声明它，您也可能会放弃它，但我还是建议您将其包括在内。

data

更有可能是您的问题是由于最初使data () { return { newDocs: null } } 起反应时，属性conventions不存在。这里最简单的解决方案是使用datas或Vue.set：

$set

通过使用this.$set(doc.datas, 'conventions', response.data) ，您不仅可以设置属性值，还可以使其具有反应性。这将允许它触发模板，以便您看到新值。

所有这些都说明，以这种方式更新$set属性似乎有点奇怪。似乎正在更新由父组件拥有的对象，通常不建议这样做。其他解决方案包括使用计算属性或为约定创建查找映射。

Answer 2

在for循环中，axios调用也有类似的问题。 请求完成后，尝试放入分配“ this.newDocs = allDocs;”。

我用一个观察者在一个变量上做到了这一点，该变量达到了我的最大for循环计数的大小。 或者，您可以尝试将其放入“ then（（response）=> {...}”中。