javascript - Vue 组件 props 作为对象的关键

Question

我不知道如何解释这一点，所以这是代码:

组件:

Vue.component( 'dropdown', {
    props: [ 'key', ],
    template: `
    <select>
        <option value="0">Please select</option>
        <option v-for="option in fields[key].options" :value="option.value">
            {{ option.text }}
        </option>
    </select>`,
})

fields只是一个全局对象:

var fields = {
    gender: {
        title: 'Select Gender',
        options: [
            {value: 'male', text:'male'},
            {value: 'female', text:'female'}
        ]
    },
    ...
}

最后在我的 html 中我有:

<dropdown key='gender'></dropdown>

在我尝试替换的组件中fields[ key ].options与 fields[ + "'" + key + "'" + ].options然后我得到option is not defined 。 所以在更改我的组件后

Vue.component( 'dropdown', {
    props: [ 'key', ],
    template: `
    <select>
        <option value="0">Please select</option>
        <option v-for="option in fields[ + '\'' + key + '\'' + ].options" :value="option.value">
            static text instead of option.text for tesing
        </option>
    </select>`,
})

现在渲染的 html 是:<!---->

Answer 1

结果是key被 Vue 或其他地方的某些东西使用，并将其更改为另一个名称，如 somekey问题解决了。

对于那些将来可能需要这个的人，这里是新组件:

Vue.component( 'dropdown', {
    props: [ 'somekey', ],
    template: `
    <select>
        <option value="0">Please select</option>
        <option v-for="option in fields[ somekey ].options" :value="option.value">
            {{ option.text }}
        </option>
    </select>`,
})

当然html中的内容会变成<dropdown somekey='gender'></dropdown>