Question

我是vue / javascript等的初学者。正在使用vue cdn。

已设置Flask API。

我无法获得v-data-table来显示所有数据！当我从api返回数据时，它将显示标题并更新分页中的行数。

问题1：

我什至无法使它与javascript文件中的静态列表一起使用。表格显示，标题显示，但没有数据！！：

script.js

const app = new Vue({
   el: '#app',
   vuetify: new Vuetify(),
   data: {
        headers: [{text:'cityname'},{text:'index'}],
        citylist: [{cityname:'London',index:21}]....................

index.html：

      <v-data-table
        :headers = "headers"
        :items="citylist"
        :items-per-page="10"
        caption = "City List"
        class="elevation-1"
        fixed
        style="max-height: 300px; overflow-y: auto"
      >
      </v-data-table>

预先感谢

Answer 1

对于数据，它应该像这样构造。

data() {
    return {
      headers: [
        { text: "cityname",
          align: "left",
          sortable: false, 
          value: "cityname" 
        },
        { text: "index", value: "index" }
      ],
      citylist: [{cityname:'London',index:21}]
    }
}

Vuetify v-data-table将不会显示数据

1 个答案: