Question

在我开始这个问题之前，我是vue.js的新手，所以我可能会遗漏一些简单的东西。我已经无休止地查看了文档，仍然没有解决我的问题。

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

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

编辑：拼写错误

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

1 个答案: