Question

我有一个vuejs组件，它像这样包裹着<select>：

 <select class="uk-select uk-width-expand" :value="selectedItem" @blur="validate" @change="onChanged($event.target.value)">
        <option disabled value="NOT_SELECTED">{{myResources.Placeholder}}</option>
        <option v-for="item in items" v-bind:value="item.Value" :key="item.Value">
            {{ item.Text }}
        </option>
    </select>

项目是一组看起来像这样的对象：

{
Value: "JP",
Text: "Japan"
}

我要处理的一个常见用例是国家/地区列表，其中Value是国家/地区代码，Text是国家/地区名称。一切都会正常进行-填充下拉列表，当我选择一个项目时，文本出现在<select>元素的文本框中，正确的值在 @changed 中发出。

只有一个问题：有时组件会收到一个初始值，并且需要显示它。我尝试通过设置 selectedItem ：

来实现这一目标

setInitialValue: function () {
      if (this.initialValue && this.items && this.items.length) {
                this.selectedItem = this.initialValue;
      }

但是，调用此方法时，<select>元素不显示任何内容。即使我可以看到该值设置正确。即使当我手动选择另一个项目时，也会显示该项目。

我什至试图确保我选择的项目是绑定到选项的数组中的实际对象：

 setInitialValue: function () {
  if (this.initialValue && this.items && this.items.length) {
            this.selectedItem = this.items.find(i => i.Value === this.initialValue.Value);
  }
},

没有变化。我想念什么？

编辑：我还需要第一个选项，如果未选择任何内容，则将带有{{myResources.Placeholder}}的选项显示在开头。另外，我可以只显示文本，但是它必须来自myResources，它是一个计算属性。

Answer 1

在选择中使用v-model选择选项。喜欢：

 <select class="uk-select uk-width-expand" v-model="selectedItem"  @blur="validate" @change="onChanged($event.target.value)">
    <option disabled value="NOT_SELECTED">{{myResources.Placeholder}}</option>
    <option v-for="item in items" v-bind:value="item.Value" :key="item.Value">
        {{ item.Text }}
    </option>
</select>

其中selectedItem可以是JP的初始值，具体取决于您的数据。

在vuejs select中以编程方式更改值

1 个答案: