vuejs2 - 在 Vue.component 中显示数据的问题
问题描述
我正在尝试使用 vue.component 来显示一些数据,这是我的 html 和 js 文件
Vue.component('process-list', {
template:'<div v-for="process in serverResponce" :serverResponce="serverResponce"> ' +
' <article class="message is-info">' +
' <div class="message-header">' +
' <p> {{ process.Process }} id: {{ process.ProcessID }}</p>' +
' </div>' +
' <div class="message-body">' +
' </div>' +
' </article>' +
'</div>',
data() {
return {
serverResponce: [
{"Process": "xxx","ProcessID": "20792","IOWrites":
"267","VirtualBytes": "4 MB","VirtualBytesPeak":
"4.29 MB","WorkingSet": "1.38 MB","WorkingSetPeak":
"3.69 MB","ProcessorTime": "0"},
{"Process": "yyy","ProcessID": "17372","IOWrites":
"96","VirtualBytes": "4.29 MB","VirtualBytesPeak":
"4.29 MB","WorkingSet": "5.32MB","WorkingSetPeak": "8.82MB","ProcessorTime": "0"}
]
}
}
})
var app = new Vue({
el: '#app'
})
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="columns" id="app">
<div class="column">
<process-list></process-list>
</div>
<div class="column">
<article class="message is-info">
<div class="message-header">
<p>System info</p>
</div>
<div class="message-body">
<pre>memory and Storage info </pre>
</div>
</article>
</div>
<div class="column">
<article class="message is-warning">
<div class="message-header">
<p>Backup avaiability</p>
</div>
<div class="message-body">
<pre>Backup info </pre>
</div>
</article>
</div>
</div>
我遇到的问题是当我打开页面时没有显示模板,并且在控制台或 Vue 开发选项卡中没有任何错误。如果我删除
<p> {{ process.Process }} id: {{ process.ProcessID }}</p>'
并将其替换为显示消息的一些文本。这对我来说表示数据未正确发送。
知道我做错了什么吗?
干杯,
es
解决方案
您缺少模板的单个根元素,只需包装成div
:´
编辑:或者更好地将 v-for 放在内部元素中(文章)
Vue.component('process-list', {
template:'<div :serverResponce="serverResponce"> ' +
' <article class="message is-info" v-for="process in serverResponce" >' +
' <div class="message-header">' +
' <p> {{ process.Process }} id: {{ process.ProcessID }}</p>' +
' </div>' +
' <div class="message-body">' +
' </div>' +
' </article>' +
'</div>',
data() {
return {
serverResponce: [
{"Process": "xxx","ProcessID": "20792","IOWrites":
"267","VirtualBytes": "4 MB","VirtualBytesPeak":
"4.29 MB","WorkingSet": "1.38 MB","WorkingSetPeak":
"3.69 MB","ProcessorTime": "0"},
{"Process": "yyy","ProcessID": "17372","IOWrites":
"96","VirtualBytes": "4.29 MB","VirtualBytesPeak":
"4.29 MB","WorkingSet": "5.32MB","WorkingSetPeak": "8.82MB","ProcessorTime": "0"}
]
}
}
})
var app = new Vue({
el: '#app'
})
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="columns" id="app">
<div class="column">
<process-list></process-list>
</div>
<div class="column">
<article class="message is-info">
<div class="message-header">
<p>System info</p>
</div>
<div class="message-body">
<pre>memory and Storage info </pre>
</div>
</article>
</div>
<div class="column">
<article class="message is-warning">
<div class="message-header">
<p>Backup avaiability</p>
</div>
<div class="message-body">
<pre>Backup info </pre>
</div>
</article>
</div>
</div>
推荐阅读
- python - 在 Mac 上运行 sugiyama.py 时出现 lxml 错误
- java - Neo4j Cypher 结果为 Java 中的 Map
- python-3.x - xmlsec 和 openssl 中生成的摘要值不同
- javascript - 在 Angular 中急切地加载图像
- r - 时间范围 08:00:00 和 15:00:00 之间的采样时间
- gtk - 开罗没有在 GtkTreeView 上绘图
- javascript - JS 模块 vs 脚本加载顺序,Safari 中的全局变量
- javascript - 无法将对象数组从父组件传递到子组件
- php - 如何将html放入else
- javascript - 页面加载后是否可以更改css样式表?