vue.js - 如何遍历数组数据并为 vue 中的每个新数据创建新行？

Question

我有一个我调用的流数据，axios.get它resposne.data是一个带有一个传感器数据的json，就像,{"Temperature":"56"},我用来在vue模板中创建一行一样。resposne.data分配给数组但它没有附加行，表中的数据正在改变。

这是模板部分

<template>
  <div class="container">
      <h1>Tabular Data</h1>
      <table class="table table-striped table-bordered" >
          <thead>
              <tr>

                  <th class="text-center">Time</th>
                  <th class="center">Device Parameter</th>
                  <th class="center">Magnitude</th>
                  <th class="right">Unit</th>     
              </tr>
          </thead>

          <tbody>


                  <tr v-for="data in Tabular" :key="data">
                    <td> {{new Date().toString()}} </td>
                    <td class="test-left">Temperature</td>
                    <td class="text-center"> {{data.toString()}} </td>
                    <td class="test-left">C</td> 

                  </tr>

                  <!-- <td>{{data_alias.Humidity}}</td>
                  <td>{{data_alias.Pressure}}</td> -->  

          </tbody>

      </table>

  </div>
</template>

<script>
/* eslint-disable */
import axios from 'axios';
export default {

    name: 'tabular',
    data() {

        return {
            Tabular:[ ],

        }
    },


    mounted() {
        setInterval(()=>{
        axios.get('http://localhost:3000/data')
            .then((response)=>{
            console.log(response.data);
            this.Tabular=response.data; 

        })
        .catch((error)=>{
            console.log(error);
        });

    },2000);//I used set interval to get data from stream constantly
 },

}
</script>

标签： vue.js

Answer 1

你确定要Tabular填一个吗？我认为没有，因为this.Tabular=response.data;；

this.Tabular 是undefined;

尝试这个

var that = this;
axios.get('http://localhost:3000/data')
            .then((response)=>{
            console.log(response.data);
            that.Tabular=response.data; 

        })
        .catch((error)=>{
            console.log(error);
        });