在 Vue.component 中显示数据时出现问题

Question

我正在尝试使用 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

Answer 1

您缺少 single root element 因为模板只是包装成 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>

在 Vue.component 中显示数据时出现问题

Problem with showing data in a Vue.component

vuejs2

buefy