Vue输入下拉简单

Question

我正在尝试做一些非常困难的事情。我有一个输入字段，我想要一个值的下拉列表。在 HTML 中它非常简单，但在 Vue 中它是量子物理。

         <div class="control">
      <input id="domain_name"  list="domain_list"
        v-select :options="['Canada', 'United States']"
        v-model="form[i-1].countries.cities"
        class="input"
        type="text"
        placeholder="Text input"
        />

      
       </div>

我的目标是让我的输入下拉菜单像这样

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

谁能帮帮我，谢谢

Answer 1

其实没那么难。

这个 HTML

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" v-model="iceCream" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

可以这样实现：

<template>
    <label for="ice-cream-choice">Choose a flavor:</label>
    <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
    
    <datalist id="ice-cream-flavors">
        <option v-for="option in options" :value="option">{{option}}</option>
    </datalist>
</template>

<script>
export default {
    name: 'Example',
    data() {
        return {
            iceCream: '',
            options: [
                'Chocolate',
                'Coconut',
                'Mint',
                'Strawberry',
                'Vanilla',
            ]
        }
    }
}
</script>

我从未使用过这种类型的选择字段..因此我不知道它的行为方式（与 v-model 绑定有关）

顺便说一句：也许plugin component 会是更好的选择