Vue 选择框，使用一个选项预选并使用来自不同 axios 调用的数组填充选项

Question

我有一个简单的选择，我目前填充了来自 axios 响应对象的一个选项。问题是该currentName值来自初始调用，我希望这是该调用时的“选定”选项。但是，当我单击选择并打开选项时，我想实际使用来自新 axios 调用的不同值数组填充可用选项，该调用正在填充selectOptions数组。

如何在触发选择时填充所选选项currentName但仍允许selectOptions成为可选选项？假设我有一个 onClick 选择，使我的第二个 axios 调用并填充selectOptions

<select class="firstLastNames linkBox">

  <option>{{currentName}}</option>

</select>

...

return {

  currentName: '',

  selectOptions: []

}

Answer 1

你需要使用v-for并v-model做你想做的事。首先，您必须从selectOptions数组中填充选择选项。在 html 中你可以这样写：<select class="firstLastNames linkBox" v-model="currentName">&nbsp; <option v-for="option in selectOptions" :value="option.id">{{option.text}}</option></select>在selectOptions数组中，您可以有一个对象数组，例如：return {&nbsp; &nbsp; currentName: "",&nbsp; &nbsp; selectOptions: [&nbsp; &nbsp; &nbsp; &nbsp; {id: 0, text: "Name one"},&nbsp; &nbsp; &nbsp; &nbsp; {id: 1, text: "Name two"}&nbsp; &nbsp; ]}这样，您selectOption就是用户可以从中选择的选项以及currentName从选项中选择的值。您传入id的值将currentName是您在此处传递时保留的值:value="option.id"因此，如果用户选择“Name one”，则currentName值为0. 或者，如果用户选择“命名两个”，则currentName值为1.