vuejs 下拉列表怎样默认选中

Question

vuejs 下拉列表怎样默认选中

Answer 1

你可以为select添加一个model进行数据绑定,在vue data里指定这个值就可以了。
演示:https://jsfiddle.net/rainwsy/ntdd9g2a/2/

文档:http://cn.vuejs.org/guide/forms.html

Answer 2

<select class="form-control" name="method" data-itemid="{{ $index }}">
    <template v-for="option in methodOptions">
        <option :value="option" v-if="option == api.method" selected>
            {{ option }}
        </option>
        <option :value="option" v-else>
            {{ option }}
        </option>
    </template>
</select>

暂时没找到其他的办法

Answer 3

我明白你的意思，就是进入的时候有个类似: "请选择" 的选项是吗？
我的做法是建一个存储选项的对象，给予对象默认值 ："请选择"
然后在select里面给予一个option selected text是 请选择 ，比较绕，不过这样可以。截一段项目代码给你看看。

//js
var infoData = {
    prizeCount:'选择奖项'
}
//html
<select class="form-control" v-model="prizeCount" v-on:change="getmanresult">
    <option selected>选择奖项</option>
    <option v-for="item in lotteryData.wxAwards" :value="item.prizeMan+'@'+item.id" v-text="item.awardsName"></option>
</select>

Answer 4

<select  v-model="select">
           <option v-for="item of list" v-if="item.id == 1" selected  v-bind:value="item.id">{{ item.name }}</option>
           <option v-for="item of list" v-if="item.id != 1"  v-bind:value="item.id">{{ item.name }}</option>
</select>

Answer 5

我来补充一下，最上面的回答，有个小问题，清楚的大神欢迎补充告知（直接看代码）

<select v-model="selected">
        <option  v-for="sel in sels" value="{{sel.a}}" >
            {{sel.a}}
        </option>
    </select>
<p>{{selected}}</p>

var vm=new Vue({
        el:'#app',
        data:{
            selected:'2',
            sels: [
                {a:"汉字1"},
                {a:"汉字2"},
                {a:"汉字3"}
            ]
        }
    });

仔细看清楚，这样子的话，是不会出来默认第二个的，我发现 option 的value值的变量不能跟 标签内的一致， v-bind绑定也不行，根本原因我也不清楚，知道的大神请告知

Answer 6

如果数据是从后台拉取的，初始化的时候也不知道第一条数据是什么，也就没法设置默认值（当然可以在拉取数据后再赋值，但这样很麻烦）

比较简单的可以这样，自己封装一下select，然后watch

watch: {
    value(val) {
      this.inputValue = val

      if (!val && this.$refs.select.options.length > 0) {
        this.inputValue = this.$refs.select.options[0].value
      }
    },

    inputValue(val) {
      this.$emit('input', val)
    }
  }
}

Answer 7

selected 的值应该为"汉字1"，"汉字2"，"汉字3"中的一个，看要选中的是哪个

Answer 8

为何不用computed呢...绑定计算属性，返回optionlist[0]

Answer 9

<select v-model="book.language">
    <option value="" ></option>
    <option value="1" v-bind:selected="{'selected': book.language == 1 ? 'selected':''}">汉语</option>
    <option value="2" v-bind:selected="{'selected': book.language == 2 ? 'selected':''}">英语</option>            
</select>

这个答案应该符合楼主要求