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">

  <option v-for="option in selectOptions" :value="option.id">{{option.text}}</option>

</select>

在selectOptions数组中，您可以有一个对象数组，例如：

return {

    currentName: "",

    selectOptions: [

        {id: 0, text: "Name one"},

        {id: 1, text: "Name two"}

    ]

}

这样，您selectOption就是用户可以从中选择的选项以及currentName从选项中选择的值。

您传入id的值将currentName是您在此处传递时保留的值:value="option.id"

因此，如果用户选择“Name one”，则currentName值为0. 或者，如果用户选择“命名两个”，则currentName值为1.