Vue.js 单选绑定

唯一有点儿现实意义的就是拿到的多选列表可能ajax从后台拿到的, 这样以后还有点儿借鉴的意思

<template>
    <div>
        below is App3:
        <br>
        <input v-model="myValue" />
        {{myValue}}
        <input v-model="myBox" type="checkbox" value="apple">
        Apple
        <input v-model="myBox" type="checkbox" value="peach">
        Peach
        <input v-model="myBox" type="checkbox" value="motorola">
        Motorola
        <br>
        {{myBox}}
        性别:
        <input type="radio">
        ------------------------<br>
        <div v-model="mySex">
            <div v-for="sex in sexOption">
                <input type="radio" :value="sex.v" name="sexInput" @change="sexHandler(sex.v)"/>
                {{sex.name}}
            </div>
            你选择了{{mySex}}
        </div>
        ------------------------<br>

        <select v-model="mySelect" value='1'>
            <option v-for="item in selectOption" :value="item.price">
                {{item.name}}
            </option>

        </select> 你选择了 {{mySelect}}


    </div>

</template>
<script>
    import CompA from './components/a'
    export default {
        components: {
            CompA: CompA
        },
        data() {
            return {
                selectOption: [{
                        name: 'apple',
                        price: 20
                    },
                    {
                        name: 'peach',
                        price: 30
                    }
                ],
                sexOption: [{
                        name: '男',
                        v: 1
                    },
                    {
                        name: '女',
                        v: 2
                    },
                    {
                        name: '保密',
                        v: 0
                    }
                ],
                myValue: '',
                myBox: [],
                mySelect: '',
                mySex:0

            }
        },
        methods: {
            triggleSome() {
                console.info('from triggersome function');
                this.$emit('my-event');
            },
            handleMyEvent() {
                console.info('from handle my event');
            },
            sexHandler(inputPara){
                this.mySex=inputPara;
                console.info('sex handler')
            }
            
        }

    }
</script>

两段分割线中间的部分, 首先这个单选里面到底有什么内容, 是不是动态的? 还是静态的? 如果是动态的, 是不是应该用select?

嗯, 值得留待以后观察.

果然话音未落, 就有了一种牛逼的解耦写法

首先在要引入select的地方, 插入一个自定义组件

    <vSelect @onSelect="selectHandler"></vSelect>

当然别忘了引入vue文件跟在components里面声明

那么这个vue里面, 一方面, 把这个select放进去:

<template>
    <div>
        <select v-model="mySelect" value='1' @change="sendEvent">
            <option v-for="item in selectOption" :value="item.price">
                {{item.name}}
            </option>

        </select> 你选择了 {{mySelect}}
    </div>
</template>

注意@change绑定在select上

然后再用handler, emit你的选择去父组件

<script>
    export default {
        data() {
            return {
                mySelect: 0,
                selectOption: [{
                        name: 'apple',
                        price: 20
                    },
                    {
                        name: 'peach',
                        price: 30
                    }
                ],
            };
        },
        methods: {
            sendEvent() {
                console.info('select changed')
                this.$emit('onSelect', this.mySelect);
            }

        }
    }
</script>

父组件再增加相应的自定义事件的处理方法即可.

selectHandler(whatUSelect) {
                console.info('this is select handler and you select ' + whatUSelect)
            }

这里有个奇怪的事就是自定义的事件, 只能在自定义的组件中才能起作用, 不知道是不是this的问题, 以后会清楚的吧.

猜你喜欢