vuejs 怎么把option的value和text都获取到

Posted 2023-05-10

感觉这个最佳答案不对 vue本身就要避免dom操作 不知道为什么还有很多人使用jq

<select name="sel" id="sel" @change="look" v-model="selectList">
  <option v-for="texts in list" :value="texts.value" ref="newText" > texts.text </option>
</select>

data里初始化

selectList : ,
list : [
  value : 0 ,text : "第一个",
  value : 1 ,text : "第二个",
  value : 2 ,text : "第三个",
  value : 3 ,text : "第四个",
  value : 4 ,text : "第五个",
]

methods:

look()
  let self = this ;
  console.log(self.$refs.newText[self.selectList].text)
,

参考技术A 通过索引设置 $(select).get(0).selectedIndex=index;//index为索引值 通过value值设置 var value="你要设置的值"; $(select).attr("value",value); $(select).val(value); $(select).get(0).value = value; 通过text值设置 var text="要选中的t...本回答被提问者采纳

Vuejs自定义select2指令

　　在做select2插件的时候遇到一些坑，最终解决如下：

  Vue.directive(‘select2‘, {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            var defaultOpt = {
                placeholder: "--请选择--",
                allowClear: true
            };
            options = _.assign(defaultOpt, options);

            $(el).select2(options).on("select2:select", (e) => {
                // v-model looks for
                //  - an event named "change"
                //  - a value with property path "$event.target.value"
                el.dispatchEvent(new Event(‘change‘, { target: e.target })); //双向绑定不生效
                //绑定选中选项的事件
                options && options.onSelect && options.onSelect(e);
            });

            //allowClear:清除选中
            $(el).select2(options).on("select2:unselecting", (e) => {
                //清空这个值，这个值即vuejs model绑定的值
                e.target.value = "";
                el.dispatchEvent(new Event(‘change‘, {
                    target: e.target
                })); //双向绑定不生效
            });

            //绑定select2 dom渲染完毕时触发的事件
            options && options.onInit && options.onInit();
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });