在 vuejs 中以 JSON 格式迭代组件道具

Posted 2023-02-22

【中文标题】在 vuejs 中以 JSON 格式迭代组件道具

【英文标题】：Iterate component props in JSON format in vuejs

【发布时间】：2018-05-10 03:17:57

【问题描述】：

有人可以帮助我吗？ 我有一个使用 vuejs 创建 SPA 的应用程序，在这个应用程序中我从 API 获取一些数据，按照示例：

var app = new Vue(
  el: '#app',
  data: () => (
    currentView: 'dash',
    devices: []
  ),
  created: function() 
    this.$http.get(API+'/devices')
      .then(result => 
      if (result.status == 200) 
        devices = result.data;
      
    )
  ,
);

此数据正在加载到 data.devices，我用它在模板中进行迭代，这就是问题所在，这是我的模板：

Vue.component('list-devices',
  template:`
    <div v-for="device in devices">
       device.description 
    </div>
  `,
  props: ['devices'],
  created: function() 
    console.log(devices);
  
);

当函数在模板中创建打印设备时，它打印数组（我使用 JSON.stringify 打印它）：

[
  "user_id":33,"description":"MA002","created_at":"2017-1015 13:35:03","updated_at":"2017-1126 20:15:41","switch_on":0,"on_line":0,"id":2,
  "user_id":33,"description":"MA003","created_at":"2017-1014 10:18:22","updated_at":"2017-1126 20:15:42","switch_on":0,"on_line":0,"id":670,
  "user_id":1,"description":"SALA02","created_at":"2017-1125 12:07:05","updated_at":"2017-1125 12:07:05","switch_on":0,"on_line":0,"id":6672
]

但是什么也没发生，数据也没有显示出来。 非常感谢。

【问题讨论】：

this.devices = result.data.

谢谢你，你是对的。它有效！

【参考方案1】：

我做了一些调整，比如从 vue data.devices 的主实例中移除，只放在组件中。但基本上@Bert 的提示解决了这个问题。 （再次感谢）

var app = new Vue(
  el: '#app',
  data: 
    currentView: 'dash'
  
);

Vue.component('list-devices',
  template:`
      <table>
        <thead>
          <tr>
            <th>Device</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="device in devices" :key="device.id">
            <td>  device.description  </td>
            <td>  device.on_line  </td>
            <td>   device.switch_on  </td>
          </tr>
        </tbody>
      </table>
  `,
  data: function()
    return 
      devices: '',
    ;
  ,
  created: function() 
    this.$http.get(API+'/devices')
    .then(result => 
      if (result.status == 200) 
        this.devices = result.data.devices;
      
      console.log(devices);
    )
  
);