将 uuid 添加到 Vuetify 数据表 crud 会导致新项目以重复的 uuid 结束

Question

我一直在使用来自 https://vuetifyjs.com/en/components/data-tables/#crud-actions 的 Vuetify CRUD 示例。

我想为每条记录添加一个唯一的 ID。我拿了他们的原始代码笔并在此处复制了导入 uuid 库。下面是一个js示例。 https://codepen.io/joomkit/pen/MWExOGK?editors=1011

import * as uuid from "https://cdn.skypack.dev/uuid@8.3.2";
console.log(uuid.v4())
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      {id: 'ID', value: 'id'},
      {
        text: 'Dessert (100g serving)',
        sortable: false,
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Actions', value: 'actions', sortable: false },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      id: uuid.v4(),      
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
    defaultItem: {
      id: uuid.v4(),      
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    },
  },

  watch: {
    dialog (val) {
      val || this.close()
    },
    dialogDelete (val) {
      val || this.closeDelete()
    },
  },

  created () {
    this.initialize()
  },

  methods: {
    initialize () {
      this.desserts = [
        {
          id: '1',
          name: 'SFrozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
        },
        {
          id: '2',
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
        },
        {
          id: '3',          
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
        },
      ]
    },

    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      this.editedIndex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialogDelete = true
    },

    deleteItemConfirm () {
      this.desserts.splice(this.editedIndex, 1)
      this.closeDelete()
    },

    close () {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    closeDelete () {
      this.dialogDelete = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
      }
      this.close()
    },
  },
})

当我在模态对话框中添加新项目时，会为添加的行创建一个新的 uuid。但是，如果您添加超过 2 个新项目，则 uuid 会重复。

这里的内置数据table索引有问题吗？

Answer 1

启动页面时，uuid被分配给“editedItem”和“defaultItem”，不再调用。

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
        this.defaultItem.id = uuid.v4();
      }
      this.close()
    },

如上修改，保存新项时，会重新设置下一项的uuid

代码还有另外一个问题。

第一次调用“NEW ITEM”关闭弹窗不保存时，close()函数中“editedItem”的uuid被覆盖为“defaultItem”的uuid。

将“defaultItem”和“editedItem”的uuid设置为相同的值。

将 uuid 添加到 Vuetify 数据表 crud 会导致新项目以重复的 uuid 结束

Adding uuid to Vuetify datatable crud results in new items ending up with duplicate uuid

vuetify.js

uuid

vuetify-datatable