vue中使用select时 如果使用 v-model 那么 option 值不能使用对象，需要将对象转换成字符串
<template>
<div>
<select class="form-select" name="" v-model="currentValue" @change="onChange">
<option :value="data | object2String" v-for="data in dataList">{{data.name}}</option>
</select>
</div>
</template>
<script>
const heros = [
{ name: '刘炫德', nickName: '刘备', value: '10001' },
{ name: '张翼德', nickName: '张飞', value: '10002' },
{ name: '关云长', nickName: '关羽', value: '10003' },
{ name: '赵子龙', nickName: '赵云', value: '10004' }
]
// string 转 object
const string2Object = str => {
return JSON.parse(obj)
}
// object 转 string
const object2String = obj => {
return JSON.stringify(str)
}
export default {
props: {
value: {
type: Object,
default () {
return { name: '关云长', nickName: '关羽', value: '10003' }
}
}
},
filters: {
string2Object,
object2String
}
data: () => ({
dataList: heros,
currentValue: string2Object(this.value)
}),
methods: {
onChange () {
this.$emit('input', object2String(this.currentValue)) // 将currentValue 转成 object
}
}
}
</script>
定义一个 filter object2string
绑定 option value 的时候使用 object2string 将 对象转换成字符串
返回当前选中值的时候使用 JSON.pares() 将字符串转成Object
