Javascript VueJS v-for内部组件模板似乎没有循环
似乎VueJS在我的组件中没有正确循环。我有一个作为属性传递给组件的对象数组,我想在组件内部渲染它们。然而,我根本没有收到任何输出 示例代码如下:Javascript VueJS v-for内部组件模板似乎没有循环,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,似乎VueJS在我的组件中没有正确循环。我有一个作为属性传递给组件的对象数组,我想在组件内部渲染它们。然而,我根本没有收到任何输出 示例代码如下: <div id="sentimentForm"> <customer-sentiment :sentiment-types="sentimentTypes" sentiment-selected="neutral"></customer-sentiment> </div> var sentimen
<div id="sentimentForm">
<customer-sentiment :sentiment-types="sentimentTypes" sentiment-selected="neutral"></customer-sentiment>
</div>
var sentimentReasons = [
{label: 'Happy', value: '3', Display: 'Happy', Key: 'happy'},
{label: 'Neutral', value: '2', Display: 'Neutral', Key: 'neutral'},
{label: 'Angry', value: '1', Display: 'Angry', Key: 'angry'}
];
Vue.component('v-select', VueSelect.VueSelect);
Vue.component('customer-sentiment', {
props: {
sentiment: {
default: null
},
sentimentSelected: {
default: null
},
sentimentTypes: {
type: Array,
default() {
return []
},
}
},
template: `
<div v-for="(item, index) in mutableOptions">
<h3>{{ index }}<h3>
<h4>{{ item.Display }}<h4>
</div>`,
created: function() {
console.log(this.sentimentTypes)
this.mutableOptions = this.sentimentTypes;
},
data() {
return {
mutableOptions: []
}
}
});
var app = new Vue({
el: '#sentimentForm',
data: function() {
return {
sentiment: '',
sentimentSelected: '',
sentimentTypes: sentimentReasons
}
}
});
客户情绪组件的模板应该只有一个根元素。该模板当前具有从v-for循环渲染的多个第一级,因此将当前模板嵌套在div中应该可以解决该问题
template: `
<div>
<div v-for="(item, index) in mutableOptions">
<h3>{{ index }}<h3>
<h4>{{ item.Display }}<h4>
</div>
</div>`,
created: function() {
console.log(this.sentimentTypes)
this.mutableOptions = this.sentimentTypes;
},
客户情绪组件的模板应该只有一个根元素。该模板当前具有从v-for循环渲染的多个第一级,因此将当前模板嵌套在div中应该可以解决该问题
template: `
<div>
<div v-for="(item, index) in mutableOptions">
<h3>{{ index }}<h3>
<h4>{{ item.Display }}<h4>
</div>
</div>`,
created: function() {
console.log(this.sentimentTypes)
this.mutableOptions = this.sentimentTypes;
},
那很容易!非常感谢。那很容易!非常感谢。