vuejs v-модель не работает на выбор, когда элементы приходят от родителя через реквизит

Question

Я делаю простой компонент vuejs, по сути, обертывающий <select>:

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'}]
        };
    }
}

предметов, которые заполняется от родителя компонента, и я знаю, что это работает, потому что я получаю список странв раскрывающемся списке.Но привязка v-model="selected" не работает.Ничего не отображается в промежутке под раскрывающимся списком, и когда я смотрю на компонент в Vue Devtools, он говорит, что selected не определено.

Как вы можете видеть, я также пытался использоватьлокальный список предметов (myItems в данных).Это отлично работает. selected заполняется, когда я выбираю элемент в раскрывающемся списке, и я вижу значение в промежутке под ним.Но мне нужен список предметов, чтобы прийти извне.Что я делаю неправильно?Я использую Vue.js v2.6.10.

Answer 1

Комментарий Стивена Томаса указал мне правильное направление.Родительский компонент предоставлял свойство «Код», а не свойство «Код».Простой случай нечувствительности к обсадной колонне в чувствительной к регистру среде.