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的模板，只需将其包装到class Program { static void Main(string[] args) { string jsontext = ( "{\"name\":\"a Name\", \"parents\":{\"father\":1, \"mother\":0,}, }"); JObject parsed = JsonConvert.DeserializeObject(jsontext) as JObject; Console.WriteLine("Name is {0}", parsed["name"].Value<string>()); Console.ReadLine(); string jsontextError = ( "{\"name\":\"a Name\", \"parents\":{\"father\":1, \"mother\":0,},, }"); JObject parsederror = JsonConvert.DeserializeObject(jsontextError, new JsonSerializerSettings { Error = HandleDeserializationError }) as JObject; if (parsederror == null) Console.WriteLine("null parse"); else Console.WriteLine("Name is {0}", parsederror["name"].Value<string>()); Console.ReadLine(); } static public void HandleDeserializationError(object sender, Newtonsoft.Json.Serialization.ErrorEventArgs errorArgs) { var currentError = errorArgs.ErrorContext.Error.Message; errorArgs.ErrorContext.Handled = true; } }中即可：´

编辑：或者最好将v-for放入内部元素（文章）

div

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' 
        })

在Vue.component中显示数据的问题

1 个答案: