Question

我从api中获取了一些数据，为此我使用axios，一切正常。

实际上，我得到了对象数组，我想在select标签中渲染它们，但是由于在我从api获取一些数据之前已装入组件，所以它不会渲染，因此它似乎不是反应性的。

<select v-model="book.cityId">
                    <option value="" disabled selected>Select city</option>
                    <option v-for = "city in dataToUse.cities" :key = "city.id" :value="city.id">
                        {{city.name}}
                    </option>
                </select>

我尝试使用v-if = "dataToUse.cities.length"来查看此数组是否有任何项目，但是在这种情况下，请选择完全不渲染。有人可以帮我吗？

Answer 1

看这个例子：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

在这种情况下，您必须用您的API响应替换“选项”

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

参考：https://vuejs.org/v2/guide/forms.html#Select

如何在选择标记中从api呈现数据？

1 个答案: