如何修复 vmodel 选择的选项 vue js答案

【问题标题】：How to fix vmodel selected option vue js如何修复 vmodel 选择的选项 vue js
【发布时间】：2021-05-20 07:09:29
【问题描述】：

所以我有一个网络应用程序，用户可以在其中从选项列表中进行选择。看下面的代码：

<div class="form-group">
    <select v-model="étatArticle" class="form-control">
        <option value="" disabled selected>Indique l'état de ton article</option>
        <option value="neuf">Neuf</option>
        <option value=tresBon>Trés bon état</option>
        <option value="bon">Bon état</option>
    </select>
</div>

问题是 v-model 导致第一个选择的选项消失。要理解我在说什么，请查看以下图片。

With v-model

没有 v-model 我得到这个 enter image description here

你能帮我解决这个问题吗？谢谢。

【问题讨论】：

你不能在这里选择属性，Vue 正在通过 v-model 处理这个问题。您应该在控制台中看到警告。删除选定的然后检查它。
我还是看不到第一个选项！！！！

标签： javascript html vue.js nuxt.js

【解决方案1】：

new Vue({
  template: '#main',
  data:
  {
    etatArticle: null
  }
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
<div class="form-group">
    <select v-model="etatArticle" class="form-control">
        <option :value="null" disabled selected>Indique l'état de ton article</option>
        <option value="neuf">Neuf</option>
        <option value=tresBon>Trés bon état</option>
        <option value="bon">Bon état</option>
    </select>
</div>
</template>

【讨论】：

即使它在这里工作我仍然不明白为什么它不能在我的应用程序中工作！（我正在使用 vue 3 + nuxt）。也许它与我目前使用的版本有关？
您的应用程序没有设置模型变量的初始值 - 所以它是 NULL 但第一个选项（禁用的选项）的值不是 NULL，它是一个空字符串。所以没有匹配，因此没有预先选择任何选项。

【解决方案2】：

在你的组件数据中，你需要定义你的 v-model 的默认值。您可以在我的codesandbox 中查看示例。

在您的模板中：

<select v-model="selectedValue" class="form-control">
    <option value="" disabled selected>
      Disabled and selected by default
    </option>
    <option value="first">First</option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select>

在您的数据中：

  data() {
    return {
      // Define your value by default to show it
      selectedValue: "",
    };
  },

【讨论】：