Question

我有一个Vue，在首次渲染Vue时，AJAX获取的选择选项不可用。

我已按照此处的建议进行操作：https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats。

该表单是从“模式”对象动态生成的。

<b-form-group v-for="(obj, key) in schema" 
  v-if="obj.type !== 'hidden'"
  :label="createInputLabel(obj, key)" :label-for="key" >
  ...
  <div v-else-if="obj.type == 'select'" role="group" 
    class="form-group">
    <select v-model="attributes[key]" :id="key" :name="key" 
      class="custom-select">
      <option v-for="option in optionsList[key]" 
        v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div>
  ...
</b-form-group>

optionsList是一个键对象，其中包含表单上所有选择元素的列表。通过查看“模式”对象来创建optionsList。其余的API代码是：

var idx = key;
Rest('GET', '/table/' + schema[key].table, requestParams, 
  this.$root.user.token)
.then(response => {      
   var localOptionsList = [];
   response.data.forEach(function(row) {
     var obj = { value: row[schema[idx].listColumns], 
       text: row[schema[idx].listColumns] };
     localOptionsList.push(obj);
   });
   Vue.set(me.optionsList, idx, localOptionsList);
})
.catch(error =>
  ...

如前所述，除了第一次渲染Vue之外，代码还可以正常工作。

这显然是因为还没有从Rest API返回数据，所以我的问题是如何让Vue在数据到达时做出反应？

有人可以帮忙吗？

Vue渲染的动态选择选项列表

0 个答案: