Javascript Vue.js-显示JSON结果无法正常工作

在开始这个问题之前，我对vue.js是100%的新手，所以我可能遗漏了一些简单的东西。我没完没了地查阅文档，仍然没有找到解决问题的方法

我只是构建了一个非常简单的示例作为练习，我填写一个表单，它会保存到我的数据库中，但也会加载我自动保存的记录

这就是奇怪的地方，当我插入JSON时，数据在我的应用程序中正确显示

当我插入自己的后端代码时，会返回有效的JSON，但它不会正确显示

这就是我调用数据的地方：

created: function(){
          this.$http.get('https://jsonplaceholder.typicode.com/users') // JSON service that is working
          this.$http.get('http://localhost:8888/vue_testing/users/get/') // My JSON Service that isn't
            .then(function(response){
              console.log(response.data);
              this.users = response.data;
            });
        }

注意，我正在从这两个服务返回有效的JSON

我的有效JSON：

但显示如下：

jsonplaceholder有效JSON:

并显示如下：

这是我的完整组件代码：

    <template>
    <div class="users">
      <h1>Users</h1>
      <form v-on:submit="add_user">
        <input type="text" v-model="new_user.name" placeholder="Enter name" /><br />
        <input type="text" v-model="new_user.email" placeholder="Enter email" />
        <input type="submit" value="submit">
      </form>
      <ul>
        <li v-for="user in users">
          {{user.name}}: {{user.email}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default{
        name: 'users',
        //Props can accept values from outside the component
        data(){
            return{
              new_user: {},
              users: []
            }
        },
        methods:{
          add_user: function(e){
            //console.log('Add');
            this.$http.post('http://localhost:8888/vue_testing/users/set/', this.new_user)
              .then(response => {
                console.log(response);
              }, error => {
                console.log(error);
            });
            e.preventDefault();
          }
        },
        created: function(){
          //this.$http.get('https://jsonplaceholder.typicode.com/users')
          this.$http.get('http://localhost:8888/vue_testing/users/get/')
            .then(function(response){
              console.log(response.data);
              this.users = response.data;
            });
        }
    }
</script>

<style scoped>
</style>

---

同样，我对vue.js完全是新手，解决这个问题的任何帮助都是值得的。谢谢。

当jsonplaceholder向您发送一组对象时：

[
    {
        "id": 1,
        "name": "Leanne Grehem",
        ...
    }
]

您正在从后端发送一个对象，该对象首先保存列，然后保存数据的二维数组：

{
    "COLUMNS": ["ID", "NAME", ...],
    "DATA": [
        [1, "Leanne Grehem, ...],
        [2, "John Doe, ...],
    ]
}

我建议您更改后端，使您的响应看起来像jsonplaceholder。否则，您将不得不使用数组创建对象。如下图所示：

    created: function(){
      //this.$http.get('https://jsonplaceholder.typicode.com/users')
      this.$http.get('http://localhost:8888/vue_testing/users/get/')
        .then(function(response){
          console.log(response.data);
          let users = [];
          const responseData = response.data['DATA']; // Get DATA key from your response
          for (user of responseData) { // iterate
              users.push( { id: user[0], name: user[1] } );  // create object out of array
          }
          this.users = users;
        });
    }

---

编辑：输入错误

我很确定你想要这个。users=response.data['data']@Dan，现在没有显示任何内容。为什么外部源没有['Data']就可以工作呢？谢谢您的时间。在模板中，您还需要执行{{user[1]}:{{{user[2]}。您的数据是数组格式的，不是对象，因此您不能使用字符串键访问它，只有数字这也不起作用。我有一种感觉，这与来源有关，因为我确实传回了我从工作中获得的完全相同的数据，但它仍然不起作用。谢谢你抽出时间。我会再挖一些。是的，我已经试过了。我在上面提到，我在自己服务器的响应中使用了完全相同的json代码，但仍然遇到了完全相同的问题。感谢您的时间和回复。由于某些原因，后端产生了大量空白。现在工作很好，谢谢你的时间。