如何在select标签中从api呈现数据？

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