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

Question

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

Answer 1

//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' },
    ]
})

Answer 2

通过数据可以获得,既然city可以得到
那么通过

this.citys.find(item => item.id === this.city)['name']

可以找到

Answer 3

你给select加一个ref="sel"
然后使用this.$refs['sel'].selectedLabel就可以了