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>

Vue Component props作为对象的关键

1 个答案: