Vue.js中v-for无法在HTML渲染数据，请求技术协助

嘿，我帮你找出几个导致产品数据无法渲染到表格里的问题啦，咱们一步步梳理：

1. 初始数据类型不匹配 #

你在data里把products初始化成了对象{}，但后端返回的是数组数据，而且v-for是用来循环数组的。Vue的响应式系统对数组和对象的更新检测逻辑不同，初始用对象的话，后续赋值数组可能无法正确触发视图更新。

修正：把products初始化为空数组[]。

2. Axios回调中的this指向错误 #

在.then(function(response) { ... })这个普通函数回调里，this的上下文不是Vue实例，而是回调函数自身，所以你写的this.products = response.data.data其实并没有把数据赋值到Vue的data中。

两种解决办法：

• 用箭头函数：箭头函数会继承外层的this（也就是Vue实例）
• 提前把Vue实例的this存成变量（比如const vm = this），再在回调里使用vm.products

3. 多余的异步时机错误代码 #

你在created钩子中写的var p = this.products完全没必要，而且此时Axios请求还在异步执行，products还是初始的空值，这行代码对渲染没有任何帮助，删掉即可。

修正后的完整Vue代码 #

new Vue({
  el: '#products',
  data () {
    return {
      // 初始化为空数组，匹配后端返回的数据类型
      products: [] 
    }
  },
  methods: {
    getProducts: function() {
      // 用箭头函数保证this指向Vue实例
      axios.get(serviceBase + 'products')
        .then(response => {
          // 确认response.data.data是正确的数组数据
          this.products = response.data.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  created: function() {
    this.getProducts()
    // 删掉无用的var p = this.products
  }
})

优化后的HTML代码（可选） #

你可以直接把v-for写在<tr>标签上，不需要额外的<template>（当然用<template>也没问题，只是这样更简洁），同时记得加上:key（用产品的唯一ID，比如prod.id），这是Vue的最佳实践：

<div class="table-responsive" id="products">
  <table class="table table-hover">
    <thead>
      <th>ID</th>
      <th>Name</th>
      <th>Category</th>
      <th>Description</th>
      <th>Color</th>
      <th>Price</th>
      <th>Actions</th>
    </thead>
    <tbody>
      <tr v-for="(prod, index) in products" :key="prod.id">
        <td>{{index+1}}</td>
        <td>{{prod.prod_name}}</td>
        <td>{{prod.cat_name}}</td>
        <td>{{prod.prod_descrip}}</td>
        <td>{{prod.prod_color}}</td>
        <td>&#8358;{{prod.prod_price}}</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

最后可以验证一下：修正后，当Axios请求成功返回数据，products数组被赋值，Vue会自动触发视图更新，表格就能正常显示产品数据啦！

内容的提问来源于stack exchange，提问作者dipp