该应用程序是 Laravel、Vuejs 中的。使用 Laravel Breeze 实现某些功能。对于一项功能，按钮应该打开一个模式。但模态未打开，控制台中出现错误 -
[Vue warn]: Property "handleCreateClick" was accessed during render but is not defined on instanceVuecode-
<template>
<div v-if="showDialog">
<div>
<input v-model="taskName" type="text" id="taskName" placeholder="Task Name" required/>
<template v-if="projects.length === 0">
<input v-model="projectName" type="text" id="projectName" placeholder="Project Name" required/>
</template>
<template v-else>
<select v-model="projectName" id="projectName" required>
<option value="" disabled selected hidden>Project Name</option>
<option v-for="project in projects" :value="project.id" :key="project.id">{{ project.name }}</option>
</select>
</template>
<template v-if="users.length === 0">
<input v-model="assignedTo" type="text" id="assignedTo" placeholder="Assigned To" required/>
</template>
<template v-else>
<select v-model="assignedTo" id="assignedTo" required>
<option value="" disabled selected hidden>Assigned To</option>
<option v-for="user in users" :value="user.id" :key="user.id">{{ user.name }}</option>
</select>
</template>
<select v-model="priority" id="priority" required>
<option value="" disabled selected hidden>Priority Level</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
<select v-model="taskStatus" id="taskStatus" @change="handleTaskStatusChange" required>
<option value="" disabled selected hidden>Task Status</option>
<option value="Pending">Pending</option>
<option value="Working On">Working On</option>
<option value="Completed">Completed</option>
</select>
<input v-model="taskStartTime" type="datetime-local" id="taskStartTime" placeholder="Select Start Time" required/>
<input v-model="taskDueTime" type="datetime-local" id="taskDueTime" placeholder="Select Due Time" required/>
<input v-model="taskCompletedTime" :disabled="taskStatus !== 'Completed'" type="datetime-local" placeholder="Select Completed Time" id="taskCompletedTime"/>
<textarea v-model="taskDescription" id="taskDescription" placeholder="Task Description"></textarea>
</div>
<button @click="createTask">Create</button>
<button @click="showDialog = false">Cancel</button>
</div>
</template>
<script>
import axios from 'axios';
import { format } from 'date-fns';
export default {
name: 'taskcreate',
data() {
return {
showDialog: false,
taskName: '',
projectName: '',
priority: '',
assignedTo: '',
taskStatus: '',
taskStartTime: '',
taskDueTime: '',
taskCompletedTime: '',
taskDescription: '',
projects: [],
users: [],
};
},
mounted() {
this.fetchUsers();
this.fetchProjects();
this.handleTaskChange();
},
methods: {
async fetchUsers() {
try {
const response = await axios.get('/api/users');
this.users = response.data;
}
catch (error) {
console.error('Error fetching Users:', error);
alert('Error fetching Users');
}
},
async fetchProjects() {
try {
const response = await axios.get('/api/projects');
this.projects = response.data;
}
catch (error) {
console.error('Error fetching projects:', error);
alert('Error fetching Projects');
}
},
async createTask() {
try {
const response = await axios.post('/api/tasks/create', {
taskName: this.taskName,
projectName: this.projectName,
priority: this.priority,
assignedTo: this.assignedTo,
taskStatus: this.taskStatus,
taskStartTime: this.taskStartTime,
taskDueTime: this.taskDueTime,
taskCompletedTime: this.taskCompletedTime,
taskDescription: this.taskDescription,
});
console.log('Creating task');
console.log(response.data);
this.showDialog = false;
}
catch (error) {
console.error('Error creating task:', error.response.data);
}
},
async handleTaskChange() {
if (this.taskStatus === 'Completed') {
this.taskCompletedTime = format(new Date(), "yyyy-MM-dd'T'HH:mm:ss");
}
},
async handleCreateClick() {
console.log('Create button clicked');
this.showDialog = true;
}
}
};
</script>
app.js 代码 -
import './bootstrap';
import { createApp } from 'vue';
import taskcreate from '../views/components/vue-components/task-create.vue';
const app = createApp({
components: {
'taskcreate': taskcreate,
},
});
app.mount('#app');
// import Alpine from 'alpinejs';
// window.Alpine = Alpine;
// Alpine.start();
app.blade.php，包含部分 -
<div id="app">
<main>
{{ $slot }}
</main>
</div>
dashboard.blade.php，按钮代码-
<div class="px-6 pt-4 pb-2">
<button @click="handleCreateClick" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Create</button>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href="#">show</a></span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href="#">createv</a></span>
</div>
<taskcreate></taskcreate>
尝试打开模式并运行该功能。希望我能得到帮助。
我相信这意味着函数
handleCreateClick