Question

我在使用Vue.js从JSON文件中检索数据时遇到了问题。下面给出了HTML和JSON数据和脚本。请帮忙......

<!DOCTYPE html>
<html>
  <head>
    <title>Vue with JSON</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>          
  </head>

  <body>
    start 
    <br/>
    <div id="app">
      <h1>Data in JSoN</h1>
      <div v-for="udata in userData">
        id:{{ udata.id }} Name: {{ udata.name }}
      </div>
      <h1>End</h1>
    </div>

    <script>
      var dataURL='data.json';
      var App=new Vue({
        el:'#app',
        data:{
          userData:[]
        },
        mounted(){
          var self=this
          $.getJSON(dataURL,function(data){
            self.userData=data.users;
          });
        }
      })
    </script>

  </body>
</html>

和

JSON文件是

{"user":[{"id":"1","name":"jaydeep Gondaliya","email":"jaydeep@live24u.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kelly@dd.com","phone":"12122322323"}]}

我无法得到结果.....

Answer 1

我的猜测是你的数据。如果您的回复是一个看起来像这样的对象（单数user）

{
  user: [...]
}

您不太可能使用复数users elf.userData=data.users;

来访问它

如何使用Vue js从JSON文件获取数据？

1 个答案: