vuejs 下拉列表怎样默认选中

vuejs 下拉列表怎样默认选中

回答:

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

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

回答:

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

暂时没找到其他的办法

回答:

我明白你的意思,就是进入的时候有个类似: “请选择” 的选项是吗?
我的做法是建一个存储选项的对象,给予对象默认值 :”请选择”
然后在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>

回答:

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

回答:

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

<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绑定也不行,根本原因我也不清楚,知道的大神请告知

回答:

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

比较简单的可以这样,自己封装一下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)
    }
  }
}

回答:

selected 的值应该为”汉字1″,”汉字2″,”汉字3″中的一个,看要选中的是哪个

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注