Vuejs2 vuejs v-model在项目通过道具来自父项时不处理选择

我正在制作一个简单的vuejs组件，基本上是包装一个

：

export const SingleSelect={
名称：“单选”，
模板：`
{{item.Name}
选定：{{Selected}}[]
}
},
数据（）{
返回{
已选择：“”，
myItems:[{code:'UK'，Name:'UK'}，{code:'JP'，Name:'Japan'}]
};
}
}

items属性从组件的父级填充，我知道这是可行的，因为我在下拉列表中得到了一个国家列表。但是

v-model=“selected”

绑定不起作用。下拉列表下的范围中没有显示任何内容，当我查看Vue Devtools中的组件时，它会说选定的未定义

如您所见，我还尝试使用本地项目列表（数据中的myItems）。这个很好用selected是在我在下拉列表中选择一个项目时填充的，我可以在它下面的范围中看到值。但我需要从外部获取项目列表。我做错了什么？

---

我正在使用Vue.js v2.6.10。

Stephen Thomas的评论为我指明了正确的方向。父组件提供的是“代码”属性，而不是“代码”属性。在区分大小写的环境中对大小写不敏感的一种简单情况。

看起来父组件没有为数组元素提供

code

属性。下拉列表显示选项的事实仅验证父级是否提供了

名称

属性。请注意，这两个属性使用不同的情况。是否父级使用的是

code

而不是

code

？可以尝试一个计算属性：

computed:{getItems:function（）{return Array.isArray（this.items）？this.items.slice（）：[]；}}

，并在getItems中将v-for更改为

item

export const SingleSelect = {
    name: "singleSelect",
    template: `
<div>
        <select v-model="selected">
            <option v-for="item in items" v-bind:value="item.code">
                {{ item.Name }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span</div>
`,
    props: {
        items: {
            type: Array,
            required: false,
            default: () => []
        }
    },
    data() {
        return {
            selected: '',
            myItems: [{ code: 'UK', Name: 'United Kingdom' }, {code: 'JP', Name: 'Japan'}]
        };
    }
}