javascript - VueJS v-for inside 组件模板似乎没有循环
问题描述
看起来 VueJS 没有在我的组件内正确循环。我有一个对象数组,我将它们作为属性传递给我的组件,并且我想在组件内部呈现它们。但是我根本没有收到任何输出。
下面的示例代码:
<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
}
}
});
解决方案
组件的customer-sentiment
模板应该只有一个根元素。该模板当前<div>
在第一级有多个(从循环渲染v-for
),因此将当前模板嵌套在 a 中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;
},
推荐阅读
- azure - K8s azure VM 节点 - 可以从主节点 ping 工作节点,但无法 ping 工作节点上的 pod
- sql - 如何在 BigQuery 查询中转义百分号?
- javascript - 如何将值附加到元素 javascript 以使用 selenium 与元素交互
- android - 找不到retrofit2.Response 的调用适配器
安卓工作室 4.0
构建.gradle:
implementation 'com.jakewharton.retrofit:retrofit2-kotlin-coroutines-adapter:0.9.2' implementation "com.squareup.retrofit2:converter-
- c++ - Pybind11:将元组列表从 Python 传递到 C++
- ruby-on-rails - 尝试从活动的 Rails 服务器进行 PG 转储并获取密码身份验证失败
- c# - 当键是动态的时从 JSON 获取子数据
- python - 我在 selenium 中使用 Chrome 网络驱动程序时遇到问题(非常奇怪的情况!!!)
- mysql - 将两个表中的数据与相同的主键组合起来
- ngrx - ngrx 是否保留操作顺序?