在vuejs 2.0.0中选择的占位符

时间:2016-11-02 08:44:07

标签: javascript select vue.js vuejs2

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

我在我的Vue组件data中有这个:

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 /组件/ cde.vue   模板语法错误:   使用v-model时,将忽略内联选定的属性。而是在组件的数据选项中声明初始值。

     

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

     

@ ./~/babel-loader!./~/vue-loader/lib/selector.js?   类型=脚本&安培;!索引= 0 ./ SRC /视图/ abcView.vue   @ ./src/views/abcView.vue

     

@ ./src/router/index.js

     

@ ./src/app.js

     

@ ./src/client-entry.js

     

@ multi app

我也试图在组件的数据部分给出默认值,但后来什么都没发生。我也试过了v-bind,但后来观察者停止了年龄变量的研究。

6 个答案:

答案 0 :(得分:20)

唯一需要解决的问题是从默认selected移除option

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

答案 1 :(得分:19)

对于可能登陆此问题的其他人,我还有一个额外步骤可以显示默认选项。就我而言,我绑定的v-model返回null而不是空字符串。这意味着一旦Vue绑定被踢入,就永远不会选择默认选项。

要解决此问题,请将默认选项的value属性简单绑定到null

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

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

答案 2 :(得分:1)

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

使用

更改禁用的选项
<option value="null" disabled selected hidden>Select Age</option>

在状态下执行这样的操作

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

答案 3 :(得分: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 或 undefined 值应该有效,但您也可以只在数据对象中定义一个占位符。

答案 4 :(得分:0)

要在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>

答案 5 :(得分:0)

我能正常工作的唯一方法:

// server-utils.js

import fetch from "node-fetch"
import FormData from "form-data"

export async function sendFile(file: File): Promise<any> {
    const submitURL = "/api/putFile";
    const data: FormData = new FormData();

    data.append("image", file);

    return await fetch(submitURL, {
        method: "post",
        body: data,

    }).then((response) => {
        return response.json();
    }).then(JSON.parse)

}

密钥为禁用的隐藏选项中的<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>