Question

现在半个小时试图解决这个问题，我似乎无法解决错误，这是我的Vue组件：

<template>
    <div class="container">
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Country Lists</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                  <tr>
                    <th>Year</th>

                  </tr>
                  <tr v-for="country in countries.data" :key="country.id">
                    <td>{{country.name}}</td>

                  </tr>
                </table>
              </div>
              <!-- /.card-body -->

            </div>
            <!-- /.card -->
          </div>
        </div>
    </div>
</template>
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.min.js"></script>

<script>
    export default {
        data(){
            return{
                country : {},
                form: new Form({
                    id : '',
                })      
            }
        },
        methods: {
            loadCountry(){
                axios.get('api/country').then(({data}) => (this.countries = data)); 
            }
        },
        mounted() {
            this.loadCountry();
            Fire.$on('reloadAfter',() => {
                this.loadCountry();
            });
        }
    }
</script>

当我加载页面时，表格不会显示，但是当我从chrome的开发者标签检查网络时，它可以并加载数据，但是它在控制台“无法读取未定义的属性”数据”中显示此错误'。

谢谢。

Answer 1

问题在这里

<tr v-for="country in countries.data" :key="country.id">
    <td>{{country.name}}</td>
</tr>

countries尚未定义。

例如，您可以将其添加到data()

data(){
    return{
        countries : {},        
    },
}

并测试data

的存在

<table v-if="countries.data" class="table table-hover">

Laravel Vue.js'无法读取数据属性'错误

1 个答案: