vue 获取select的选中对象值

时间:2024-04-02 19:28:18

vue 官网:https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86

vue 获取select的选中对象值

 

思路:通过下标值来获取 对象的值

代码:

<!DOCTYPE html>
<html>
<head>
    <title>获取数据</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <h2>
            请选择你喜欢水果ID
        </h2>
        <select v-model="seleced">
            <option v-for="(item, key) in optionArr" :value="key">
                {{ item.label }}
            </option>
        </select>
        <h3>
            <!-- 想要显示、请求label、id、en都任意 -->
            {{ optionArr[seleced]['id'] }}

        </h3>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                optionArr: [
                    {label: "苹果", id: 2, en: "appe", price: "10块"},
                    {label: "雪梨", id: 22, en: "pear", price: "2块"},
                    {label: "西瓜", id: 222, en: "watermelon", price: "5块"},
                    {label: "葡萄", id: 2222, en: "grape", price: "8块"},
                    {label: "樱桃", id: 'yingTao', en: "Cherry", price: "6块"},
                ],
                seleced: 3 // 选中的数组下标,用于指向数组中,选中的对象位置
            }
        },
        watch: {
            seleced(newVal, oldVal) {
                console.log('你选中的对象数据为:')
                console.log( this.optionArr[newVal] )
            }
        }
    });
</script>
</html>