使用 Nuxtjs 创建一个新页面

Question

大家好，我尝试创建一个 包含组件的新页面 当我启动 npm run dev 时，出现以下错误：

用户页面调用组件允许创建用户数据表，这要归功于 vuetify UI 组件

// pages/user.js

<template>

    <div>

        <datatable-component :data="data"></datatable-component>

    </div>

</template>

<script>
import datatableComponent from "@/components/datatableComponent/index"

import UsersModel from "@/models/UserModel"

export default {
    data () {
        return {
            data: UsersModel
        }
    },

    components: {
        datatableComponent,
    }
}
</script>

我过去的数据包含用户对象，然后我将其显示在数据表中

// 组件/datatbleComponent

export default {
  name: 'datatable-component',
  components: {},
  props: ["data"],
  data() {
    return {
      pagination: {
        sortBy: 'id'
      },
      selected: [],
      headers: this.data.headers,
      items: this.data.data,
      add_path: this.data.buttons.add_path
    }
  },

  computed: {


  },
  mounted() {

  },
  methods: {
    toggleAll() {
      if (this.selected.length) this.selected = []
      else this.selected = this.items.slice()
    },
    changeSort(column) {
      if (this.pagination.sortBy === column) {
        this.pagination.descending = !this.pagination.descending
      } else {
        this.pagination.sortBy = column
        this.pagination.descending = false
      }
    }
  }

}

如果你想要更多文件，告诉我你需要什么，谢谢

// components/datatable/datatable.html

<section class="datatable-component">
  <div>
    <v-btn depressed color="#1867c0" dark right :href="add_path">
      <v-icon dark>add</v-icon>
      Add
    </v-btn>

    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="items"
      :pagination.sync="pagination"
      select-all
      item-key="name"
      class="elevation-1"
    >

      <template v-slot:headers="props">
        <tr>
          <th>
            <v-checkbox
              :input-value="props.all"
              :indeterminate="props.indeterminate"
              primary
              hide-details
              @click.stop="toggleAll"
            ></v-checkbox>
          </th>
          <th
            v-for="header in props.headers"
            :key="header.text"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
      </template>

      <template v-slot:items="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
          <td>
              <v-checkbox
                :input-value="props.selected"
                primary
                hide-details
              ></v-checkbox>
            </v-layout>
          </td>
          <td>
            <v-layout justify-center>
              <v-btn depressed color="#ccc" light right small :href="props.item.actions[0].path + props.item.content[0].content" v-for="action in props.item.actions">
                  <v-icon small light>{{ action.icon }}</v-icon>
                  {{ action.test }}
                </v-btn>
              </v-layout>

          </td>

          <td v-for="item in props.item.content">
              {{ item.content }}
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</section>

Answer 1

根据您的错误消息，问题可能是没有key 的v-for，为了修复它，您可以使用数组中的属性或创建索引。

您应该在components/datatable/datatable.html 上替换下面的代码

<td v-for="item in props.item.content">
    {{ item.content }}
</td>

为此：

<td v-for="(item, index) in props.item.content" :key="index">
    {{ item.content }}
</td>

在v-for创建索引并用作key