Question

我有一个json（books.json），我想用VUE将其内容显示在网页上的列表中。我似乎无法成功。代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <span>{{items}}</span>
    <ul>
      <li v-repeat="items">
         <span class="name">{{books.name}}</span><br>
         <span class="genre">{{books.genre}}</span>
      </li>
    </ul>
  </div>
</body>
 

<script>

    var app= new Vue({
        data: {
          items: null
        },

        created: function () {
          this.fetchData();
        },

        methods: {
          fetchData: function () {
          var self = this;
          $.get( 'books.json', function( data ) {
              self.items = data;
          });
          }
        }
    });
</script>
 
</html>

有人可以帮我吗？谢谢

Answer 1

请更新您的vue版本。我已将v-repeat替换为v-for并将其安装到#app。您也可以在vue实例中使用el而不是$mount。另外，我已经将数据更改为函数。（https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function）

const app = new Vue({
  data() {
    return {
      items: null
    }
  },

  created: function () {
    this.fetchData();
  },

  methods: {
    fetchData: function () {
      var self = this;
      
      // test data
      this.items = [{
        name: 'Test-Name',
        genre: 'My Genre'
      }];
      
      // Commented out because we don't have this file.
      /* $.get( 'books.json', ( data ) => {
        self.items = data;
      }); */
    }
  }
});

app.$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>{{items}}</span>
  <ul>
    <li v-for="book in items" :key="book.name">
      <span class="name">{{book.name}}</span><br>
      <span class="genre">{{book.genre}}</span>
    </li>
  </ul>
</div>

如何从本地存储中读取json并在VUE中显示数据

1 个答案: