33

我正在使用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>

data我的 Vue 组件中有这个：

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

但是在为选择添加默认值时我开始收到此错误：

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

@ ./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，但后来观察者停止研究年龄变量。

4

6 回答 6

47

对于可能遇到此问题的其他人，我还有一个额外的步骤可以让默认选项出现。就我而言，v-model我绑定到的是返回null而不是空字符串。这意味着一旦启动 Vue 绑定，就永远不会选择默认选项。

要解决此问题，value只需将默认选项的属性绑定到null：

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

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

于 2017-07-21T21:16:02.420 回答
34

唯一需要做的就是selected从默认值中删除option：

 <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>
于 2016-11-02T09:28:32.027 回答
12

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

更改您的禁用选项

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

在状态下做这样的事情

data () {enter code here
  return {
    age: null,
  }
}
于 2019-12-04T06:37:56.857 回答
8

以 Shivam Bisht 为基础，以防您无法访问默认值。只需将 value="undefined" 添加到您的占位符选项标签中。

占位符文本

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      param: undefined,
    };
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="param">
    <option value="undefined" disabled>Placeholder text</option>
    <option value="1">Dutch woman are beautiful.</option>
    <option value="11">German Men are slow.</option>
  </select>
</div>

于 2019-12-06T09:59:46.837 回答
1

我让它工作的唯一方法：

<select v-model="selectedTemplate" class="btn btn-default">
   <option v-for="template in templates" v-bind:value="template.tasks"}{{template.name}}</option>
   <option :value="this.selectedTemplate" disabled hidden>Select a template</option>
</select>

关键是:value=this.selectedtemplate禁用的隐藏选项。

于 2020-11-28T16:21:23.977 回答
1

加起来其他答案，因为它们在特定条件下似乎都是正确的：它取决于您的 v-model 变量所期望的数据类型，例如，如果它期望一个整数传递 :value="null" 或： value="undefined" 可以工作，但如果它期望一个对象，那么你需要传递：value="{}"。

//Example: data/v-model expects integer
<select v-model="param">
   <option :value="undefined" disabled>Placeholder text</option>
   <option value="1">1</option>
   <option value="11">11</option>
</select>

//Example: data/v-model expects object
<select v-model="param">
   <option :value="{}" disabled>Placeholder text</option>
   <option
        v-for="item in items"
        :key="item.id"
        :value="item"
      >
        {{ item.propery }}
   </option>
</select>

对于字符串 null 或未定义的值应该可以工作，但您也可以在数据对象中定义一个占位符。

于 2021-01-14T01:39:25.427 回答