可以从此 Javascript 代码呈现 Vue 中的 HTML 表格吗？ [关闭]

Posted 2023-02-22

【中文标题】可以从此 Javascript 代码呈现 Vue 中的 HTML 表格吗？ [关闭]

【英文标题】：Can a HTML table in Vue be rendered from this Javascript code? [closed]

【发布时间】：2019-12-06 20:39:35

【问题描述】：

我在 Vue 中工作以从调用的 API 制作数据表，我有这个 javascript 代码可以成功地在 Chrome 的控制台中返回数据：

import JQuery from 'jquery'
let $ = JQuery

$(document).ready(function()
    $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data)
        var employeeData = '';

        console.log(data);

        $.each(data, function(key, value)
            employeeData += '<tr>';
            employeeData += '<td>'+value.userId+'</td>';
            employeeData += '<td>'+value.id+'</td>';
            employeeData += '<td>'+value.title+'</td>';
            employeeData += '<td>'+value.body+'</td>';

            employeeData += '<tr>';
        );
        $('#tracerouteTable').append(employeeData);
    );
);

如何在 Vue 的模板标签中编写这个来用 v-for 渲染这个表格？

【问题讨论】：

这是您尝试翻译成 Vue 的 jQuery 代码，还是您尝试使用 Vue 代码？如果是前者，您应该向我们展示您在 Vue 中的尝试。如果是后者，那你就误解了 Vue 的意思了。

【参考方案1】：

你做错了——你不需要 jQuery。 我给你举个例子

new Vue(
  el: "#app",
  data: 
    users: []
  ,
  
  created() 
  	axios.get('https://jsonplaceholder.typicode.com/users')
    	.then(response => this.users = response.data)
  
) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <th>Name</th>
      <th>E-Mail</th>
    </tr>
    <tr v-for="user in users" :key="user.id">
      <td>user.name</td>
      <td>user.email</td>
    </tr>
  </table>
</div>

【讨论】：

完全正确。我首先要了解 VUE 是什么以及它是如何工作的。它有据可查。