重置Vue組件中的單選按鈕

Question

我正在使用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>

第一個（默認）選項為null（如果列表由Objects組成，則為“”，如果由String組成）。 選擇任何其他選項時，值都會更改。 我最終從父組件（示例中為add.resource）更改綁定值，將其重置為null，但是單選輸入不會更改為第一個（默認）元素。

因此，我需要的是在重置值時，下拉組件進入初始狀態，這意味着選擇了第一個（默認）單選選項。

在將代碼放入組件之前，代碼一直在正常工作，所以我認為這是prop傳播的問題

Answer 1

您需要注意props變化，因為道具沒有反應性...

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