vue 组件不渲染从后端获取的数据

Question

我有一个非常基本的 HTML 页面，其中有一个简单的 Vue 组件。在网络选项卡中，我可以看到它正确获取了数据，应该出现的列表已呈现，但数据根本不存在。    <div id="app">      <h2>Total inventory: {{ totalProducts }}</h2>      <ul>        <li>beginning of the list</li>        <li v-for="product in products">          {{ product.name }} {{ product.price }}        </li>        <li>End of the list</li>      </ul>    </div>    <script src="https://unpkg.com/vue"></script>    <script>      const app = new Vue({        el: '#app',        data: {          products: []        },        created () {          fetch('http://localhost:3000/api/teddies')            .then(response => response.json())            .then(json => {              this.products = json.products            })        },        computed () {          return this.products.reduce((sum, product) => {            return sum + product.quantity          }, 0)        }      })    </script>我尝试将脚本的代码包含到一个单独的文件中，使用 axios 进行请求（我知道它不会改变任何事情，因为请求实际上已经有效），将 ID 直接归因于列表并在脚本中使用它...没有出现任何内容来代替 {{ Product.name }} 和 {{ Product.price }} 。同样适用于totalProducts变量和{{totalProducts}}

Answer 1

json直接分配给this.productslike ：

 fetch('https://fakestoreapi.com/products')

            .then(response => response.json())

            .then(json => {

              this.products = json           

            })

因为json代表products列表，所以json.products会返回undefined

计算属性应定义如下：

computed:{

  comp1(){...},

 comp2(){...}

}

<div id="app">

  <h2>Total inventory: {{ totalProducts }}</h2>

  <ul>

    <li>beginning of the list</li>

    <li v-for="product in products">

      {{ product.title }} {{ product.price }}

    </li>

    <li>End of the list</li>

  </ul>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      products: []

    },

    created() {

      fetch('https://fakestoreapi.com/products')

        .then(response => response.json())

        .then(prod => {

          this.products = prod

         

        })

    },

    computed: {

      totalProducts() {

        return this.products.reduce((sum, product) => {

          return sum + product.price

        }, 0)

      }

    }

  })

</script>

Answer 2

您的数据应该返回一个返回新对象的函数：

短途

data: () => ({

   products: []

})

很长的路要走

data() {

  return {

    products: []

  }

}