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

Question

我在 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 渲染这个表格？

Answer 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>