vue.js - vue绑定的select如何获取选中option的text

问题描述

问 题

<select v-model='city'>
    <option v-for="city in citys" v-bind:value="city.Id">{{city.Name}}</option>
</select>

new Vue({
el:'#app',
data:{
    citys:[{id:1,name:'北京'}],
    city:''
}
})

## 不通过dom 的方式,能否获取到选中option的text?

解决方案

//HTML

<select v-model="selected">
    <option v-for="test in tests" :value="test">{{ test.text }}</option>
</select>

{{ selected.text }}


//JS
new Vue({
    el: 'body',
    selected: {},
    tests: [
        { value: 1, text: 'some text' },
        { value: 2, text: 'some other text' },
        { value: 3, text: 'some more text' },
        { value: 4, text: 'text' },
    ]
})

这篇关于vue.js - vue绑定的select如何获取选中option的text的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！