Create a new page with Nuxtjs

Question

Hi everyone I tried to create a new page which contains component and when I launched npm run dev I got the following error :

User page calls component which allow to create a datatable of users thanks to vuetify UI component

// 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>

I past data which contains an object of users, and after i displayed that in a datatable

// components/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
      }
    }
  }

}

If you want more files, tell me what you need, thank's

// 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>

Could you post your component/datatableComponent/datatableComponent.html — Teste Account
Your problem is very large, consider cutting it in two, just to see where the problem come from. Remove a lot of code until the project works, and then add parts, one by one. — Slim
I don't understand the problem because sometimes it work's and sometime i get error. Since yesterday i don't change my code and I've no error but I need to understand @Slim — wyllisMonteiro
It would be better if you could also post a working example on Codesandbox.io so we can help better. — Christopher Dosin

Teste Account Teste Account · Accepted Answer · 2019-04-05T10:06:33

Following your error message the issue might be a v-for without a key, in order to fix it, you can use a property you have in your array or create an index.

You should replace this the code below on components/datatable/datatable.html

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

For this:

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

Where an index is created to v-for and it is used as key

Create a new page with Nuxtjs

1 Answers