web-applications - Vue 3.0.0 PrimeVue 3.3.5 单击 DataTable 中的按钮时出现 $options.editCategories 错误

问题描述

I. 有以下我正在为应用程序编写的组件。该组件在未完成的应用程序中用于 PrimeVues TabVue。我试图调整 CRUD DataTable 示例，但是 wgen 我单击编辑项（或删除项）按钮我收到 $options.editCategory is not a function error in the browser console。显然我在这里遗漏了一些东西，但不知道是什么。任何建议，将不胜感激。

模板部分包括

<DataTable ref="dt" :value="categories" :dataKey="id" stripedRows>
    <Column field="id" header="ID" class="p-col-1"></Column>
    <Column field="name" header="Name" class="p-col-10"></Column>
    <Column> :exportable="false">
        <template #body="slotProps">
            <Button 
                icon="pi pi-pencil" 
                class="p-button-rounded p-button-success p-mr-2" 
                @click="editCategory(slotProps.data)"
            />
            <Button 
                icon="pi pi-trash" 
                class="p-button-rounded p-button-danger p-mr-2"
                @click="deleteCategory(slotProps.data)"
            />
        </template>
    </Column>
</DataTable>

<!-- Add new category button -->
<div class="p-d-flex p-jc-end p-mt-3">
    <Button label="Add" @click="openAddDlg" />
</div> 

<!-- Dialog boxes -->  
<Dialog header="Add New Category" :visible="addCategory" :style="{ width: '500px'}" :modal="true">
    <div class="p-fluid p-grid">
        <div class="p-field p-col-12 p-mt-3">
            ID: {{ currCategory.id }}
        </div>
        <div class="p-field p-col-10 p-mt-3">
            <span class="p-float-label">
                <InputText id="category" type="text" v-model="currCategory.name" />
                <label for="category">Category Name</label>
            </span>
    </div>
    </div>

    <template #footer>
        <div class="p-d-flex p-jc-end p-mt-3">
            <Button label="Cancel" class="p-button-outlined" @click="closeAddDlg" />
            <Button label="Save" @click="saveNewCategory" />
        </div>
    </template>
</Dialog>

脚本部分包含

import DataTable from 'primevue/datatable/sfc'
import Column from 'primevue/column/sfc'
import Button from 'primevue/button/sfc'
import Dialog from 'primevue/dialog/sfc'
import InputText from 'primevue/inputtext/sfc'

export default {
    name: 'CategorySettings',
    components: { DataTable, Column, Button, Dialog, InputText },
    data() {
        return {
            categories: [],
            currCategory: null,
            addCategory: false,
            editCategory: false,
            deleteCategory: false
        }
    },
    methods: { 
        openAddDlg() {
            let id = 1
            if (this.categories.length) {
                id = this.categories[this.categories.length - 1].id + 1
            } 
            this.currCategory = { id: id, name: '' }
            this.addCategory = true
        },
        closeAddDlg() {
            this.addCategory = false
        },
        saveNewCategory() {
            if (this.currCategory.name !== '') {
                this.categories.push(this.currCategory)            
            }
            this.addCategory = false
        },
        editCategory(category) {
            this.currCategory = {...category}
        },
        deleteCategory(category) {

        }
    }
}

Sorry about the formatting of the script section. It was formatted properly when I pasted it in.

标签： web-applicationsvuejs3primevue

web-applications - Vue 3.0.0 PrimeVue 3.3.5 单击 DataTable 中的按钮时出现 $options.editCategories 错误

问题描述

解决方案

推荐阅读