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

Question

在开始这个问题之前，我对 vue.js 100% 陌生，所以我可能会错过一些简单的东西。我无休止地查阅了文档，但仍然没有解决我的问题。

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

当我插入 https://jsonplaceholder.typicode.com/users 时，事情就变得奇怪了。 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:http://take.ms/lIa3u

但显示如下:http://take.ms/6dOEL

jsonplaceholder 有效 JSON:http://take.ms/VCwKZ

显示如下:http://take.ms/Ne3fw

这是我完整的组件代码:

    <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 完全陌生，任何解决这个问题的帮助都是值得赞赏的。谢谢。

Answer 1

当 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;
        });
    }

编辑:拼写错误