时间戳

首页 > 解决方案 > Vue组件中的重置单选按钮

javascript - Vue组件中的重置单选按钮

问题描述

我正在使用 Vue 组件来创建下拉选择输入。这是组件的代码：

export default {
    name:"dropdown",
    template:`
    <div class="select">
        <ul>
            <li><label><input type="radio" v-model="val" :value="init" disabled checked><span>{{placeholder}}</span></label></li>
            <li v-for="item in list"><label><input type="radio" v-model="val" :value="item.value" /><span>{{item.name}}</span></label></li>
        </ul>
    </div>`,
    props: {
        list: { type:Array, required:true },
        placeholder: { type:String, default:"Select" },
        value: { required:true }
    },
    data:function() {
        return {
            val:this.value
        }
    },
    computed:{
        init:function() {
            return this.list[0].value instanceof Object ? null : '';
        }
    },
    watch:{
        val:function(val) {
            this.$emit('input', val);
        }
    }
};

然后我可以在页面中使用它：

<dropdown :list="RESOURCES" v-model="add.resource" placeholder="Select resource" class="input-x2"></dropdown>

第一个（默认）选项为空（如果列表由对象组成，或者如果由字符串组成，则为“”）。选择任何其他选项时，值会更改。我最终更改了父组件（示例中的 add.resource）的绑定值，将其重置为 null，但无线电输入不会更改为第一个（默认）元素。

所以，我需要的是在重置值时，下拉组件进入初始状态，这意味着选择了第一个（默认）单选选项。

代码在我将其放入组件之前一直正常工作，所以我猜这是道具传播的问题

标签： javascriptvue.js

解决方案

你需要观察props变化，因为道具不是反应性的......

watch:{
    val:function(val) {
        this.$emit('input', val);
    },
    list:function(list) {
        //Add your code here!
    }
}

推荐阅读