vuejs 2.0.0中用于select的占位符

理查德Itachi2020-03-13

我正在使用vuejs 2.0创建一个webapp 。我使用以下代码创建了简单的选择输入：

  <select v-model="age">
    <option value="" disabled selected hidden>Select Age</option>
    <option value="1"> 1 Year</option>
    <option value="11"> 11 Year</option>
  </select>

我在dataVue组件中有这个：

data () {
  return {
    age: "",
  }
},
watch: {      
  age: function (newAge) {
    console.log("log here")
  }

但是，当为select添加默认值时，我开始出现此错误：

./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ components / cde.vue模板语法错误：使用v模型时，将忽略内联选择的on属性。而是在组件的data选项中声明初始值。

@ ./src/components/cde.vue 10：23-151

@ ./~/babel-loader!./~/vue-loader/lib/selector.js？type = script＆index = 0！./ src / views / abcView.vue @ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@多应用

我也尝试在组件的数据部分提供默认值，但是随后什么也没有发生。我v-bind也尝试过，但随后观察者停止研究年龄变量。

满天星2020/03/13 20:22:28

对于可能遇到此问题的其他人，我还有一个额外的步骤来使默认选项出现。在我的情况下，v-model我绑定的对象正在返回null，而不是一个空字符串。这意味着一旦插入Vue绑定，就永远不会选择默认选项。

为了解决这个问题，value只需将默认选项的属性绑定到null：

<select v-model="age">
  <option :value="null" disabled>Select Age</option>
  ...
</select>

http://jsfiddle.net/2Logme0m/1/

樱Eva2020/03/13 20:22:28

对于占位符，您需要将value属性设置为与状态中定义为初始值相同的值。

更改您的禁用选项

<option value="null" disabled selected hidden>Select Age</option>

并在状态下做这样的事情

data () {enter code here
  return {
    age: null,
  }
}

理查德Itachi2020/03/13 20:22:28

要做的唯一事情就是selected从默认设置中删除option：

 <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer