主页 / 问题 / 658359
Accepted
andrey
Asked:2020-04-25 21:26:27 +0800 CST2020-04-25 21:26:27 +0800 CST

VueJS 不渲染列表

  • 772

为什么它不起作用？列表不显示，求助

<template>
  <div>
    <h3>Available talks</h3>
    <div v-for="item in items">
      <p>{{item.title}} by <strong>{{item.userId}}</strong></p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items:[]
       }
  },
  created: function () {
    this.fetchData();
  },
    methods: {
    fetchData: function () {
    this.$http.get( 'https://jsonplaceholder.typicode.com/posts', function( data ) {
        this.items = data;
    }); } } }
</script>

<style>
</style>
vue.js

1 个回答

  1. Best Answer

    您在此位置丢失了此上下文：

    this.$http.get( 'https://jsonplaceholder.typicode.com/posts', function( data ) 
{
    this.items = data;
});

    您可以通过将其分配给另一个变量来修复它：

    var that = this;
this.$http.get( 'https://jsonplaceholder.typicode.com/posts', function( data ) 
{
    that.items = data;
});

    或者使用 ES6 中的箭头函数：

    this.$http.get( 'https://jsonplaceholder.typicode.com/posts', (data) => 
{
    this.items = data;
});
    • 2

相关问题