javascript - 如何修复 vmodel 选择的选项 vue js

Question

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

<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 导致第一个选择的选项消失。要理解我在说什么，请查看以下图片。

带 v 模型

没有 v-model 我在这里 输入图像描述

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

标签： javascripthtmlvue.jsnuxt.js

Answer 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>