时间戳

首页 > 解决方案 > Vue 选择框，使用一个选项预选并使用来自不同 axios 调用的数组填充选项

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

问题描述

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

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

<select class="firstLastNames linkBox">
  <option>{{currentName}}</option>
</select>

...

return {
  currentName: '',
  selectOptions: []
}

标签： javascriptvue.js

解决方案

你需要使用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.

推荐阅读