Vue.js抛出多个警告：无效的prop：对于prop“items”类型检查失败。预期数组，得到值为“”的字符串

我使用vue-cli作为前端，使用express作为后端。我的后端数据的处理时间是1.7秒，如果我在mounted ()下执行请求，vue已经读过data ()并给我警告，它期待其他类型，不能排序等。

有没有办法在没有警告的情况下做到这一点？

这是我的html部分：

   <v-data-table
        class="ownstyle"
        :headers="headers"
        :items="orders"
    >
        <template slot="items" slot-scope="props">
            <td >{{ props.item.value1 }}</td>
            <td >{{ props.item.value2 }}</td>
            ...
        </template>
    </v-data-table>

这是脚本部分：

data () {
    return {
        headers: [
            { text: 'name1', value: 'value1', ...},
            { text: 'name2', value: 'value2', ...},
            ...
        ],
        orders: ''
    }
},

mounted () {
    ApiService.orders().then(
        response => (this.orders = response.data))
}

数据表期望通过:items="orders"传递的orders变量是一个数组。你在这里将它定义为一个字符串orders: ''。你可能想用orders: []代替。

Vue.js抛出多个警告：无效的prop：对于prop“items”类型检查失败。预期数组，得到值为“”的字符串

我使用vue-cli作为前端，使用express作为后端。我的后端数据的处理时间是1.7秒，如果我在mounted ()下执行请求，vue已经读过data ()并给我警告，它期待其他类型，不能排序等。

有没有办法在没有警告的情况下做到这一点？

这是我的html部分：

   <v-data-table
        class="ownstyle"
        :headers="headers"
        :items="orders"
    >
        <template slot="items" slot-scope="props">
            <td >{{ props.item.value1 }}</td>
            <td >{{ props.item.value2 }}</td>
            ...
        </template>
    </v-data-table>

这是脚本部分：

data () {
    return {
        headers: [
            { text: 'name1', value: 'value1', ...},
            { text: 'name2', value: 'value2', ...},
            ...
        ],
        orders: ''
    }
},

mounted () {
    ApiService.orders().then(
        response => (this.orders = response.data))
}

数据表期望通过:items="orders"传递的orders变量是一个数组。你在这里将它定义为一个字符串orders: ''。你可能想用orders: []代替。