Vue 3未选择选择中的第一个选项作为默认选项

2j4z5cfb 于 2023-03-03 发布在 Vue.js

关注(0)|答案(2)|浏览(349)

我有一个Vue3应用程序，其中显示了一些选择框。选项是从JSON数据中获得的。除了select中的第一个选项，这是一个默认选项，用户可以看到文本。我的问题是，当页面加载时，第一个选项没有显示在选择框中。
我的一个选择框在我的vue模板部分看起来像这样：

<template>
    <div>
        <select v-model="selectModel" @change="changeSelect">
            <option>Select option</option>
            <option v-for="item in props.options" :value="item.value" :key="item.value">{{ item.text }}</option>
        </select>
    </div>
</template>

我得到的期权数据如下：

<script type="application/json" data-state="@guid">
        {
           "data": {
               "options": [
                   {"value": "1", "text": "Option 1 title"},
                   {"value": "2", "text": "Option 2 title"}
                ]
            }
        }
</script>

它在vue文件中定义如下：

interface Props {
    options: { value: number; text: string }[] | null;
}
const props = defineProps<Props>();

当页面呈现时，选择框就在那里，有三个选项。所以我想实现的是，当用户加载页面时，显示第一个选项，文本为“Select option”。现在，没有选择任何选项，因此select中的文本为空。
有人知道该怎么做吗？我试过搜索，试过不同的方法，比如在第一个选项上设置一个选定的属性，但是似乎没有什么帮助。
先谢了。

vue.js

来源：https://stackoverflow.com/questions/75593734/vue-3-does-not-select-the-first-option-in-a-select-as-the-default-one

2条答案

按热度按时间

de90aj5v1#

设置selectModelnull的初始值，并给第一个option元素一个null值，如-<option value="null">Select option</option>，它将被自动选中。

const { createApp, ref} = Vue;

const app = {
  setup(){
    const options = ref([
      {"value": "1", "text": "Option 1 title"},
      {"value": "2", "text": "Option 2 title"},
    ])
    const selectModel = ref(null)
    return {options, selectModel}
  }
}
createApp(app).mount('#app')

<div id="app" class="d-flex justify-center">
  <div>
    <div>
      <select v-model="selectModel" @change="changeSelect">
        <option value="null">Select option</option>
        <option v-for="item in options" :value="item.value" :key="item.value">{{ item.text }}</option>
      </select>
    </div>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

赞(0）回复(0）举报 2023-03-03

8hhllhi22#

您只需将"Please select"文本添加到值为null的选项中，这样默认情况下该选项处于选中状态：

const { createApp, ref} = Vue;

const app = {
  setup(){
    const options = ref([
      {"value": null, "text": "Please select", disabled: true},
      {"value": "1", "text": "Option 1 title"},
      {"value": "2", "text": "Option 2 title"},
    ])
    const selected = ref(null)
    return {options, selected}
  }
}
createApp(app).mount('#app')

<div id="app" class="d-flex justify-center">
  <div>
    <select v-model="selected">
      <option
        v-for="item in options" 
        :value="item.value" 
        :key="item.value" 
        :disabled="selected && item.disabled"
      >
      {{ item.text }}</option>
    </select>
    <div>Selected: {{ selected ?? 'null' }}</div>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

赞(0）回复(0）举报 2023-03-03

我来回答

Vue 3未选择选择中的第一个选项作为默认选项

2条答案

相关问题

热门标签

最新问答