Vue.js 我无法在带有vue的表中显示数据

我试图通过vuejs在表中显示数据，但它抛出以下错误。 [Vue warn]：呈现中出错：TypeError:无法读取null的属性“id”

export default {
    created: function() {
        this.getCiudades();
    },
    data() {
      return {
        ciudades: [],
      }
    },
    methods: {
        getCiudades: function() {
            var urlciudades = 'ciudadesjson';
            axios.get(urlciudades).then(response => {
                this.ciudades = response.data;
                });
            }
    }
}

---

如果您确信console.log正在从您的方法/函数获得响应，请按如下方式记录您的数据：

methods: {
  getCiudades() {
    var urlciudades = 'ciudadesjson';
    axios.get(urlciudades).then(response => {
      this.ciudades = response.data;
      console.log('myData:', response.data)
    });
  }
}

然后，简单的解决方案是将v-if添加到表中

也许这会有帮助

                <tbody>
                <tr v-for="(ciudad,i) in ciudades" :key="i">
                    <td>
                        @{{ ciudad.id }}
                    </td>
                    <td>
                        @{{ ciudad.nombres }}
                    </td>
                </tr>
            </tbody>

---

如果ciudad.id在数组中的任何对象中为空，则可以使用索引号作为键，或ciucad.id。

似乎至少有一个项为空。将ciudad.id更改为ciudad并注释ciudad.nombres以查看是否存在此类项目。查看浏览器的网络控制台以检查从服务器返回的响应。请检查网络并在此处添加axios响应。

<table v-if='ciudades.length'>...</table>

data() {
  return {
    ciudades: [
      {
        id: 0,
        nombres: '',
      },
    ],
  };
},

                <tbody>
                <tr v-for="(ciudad,i) in ciudades" :key="i">
                    <td>
                        @{{ ciudad.id }}
                    </td>
                    <td>
                        @{{ ciudad.nombres }}
                    </td>
                </tr>
            </tbody>