In my project, I am developing a task manager application utilizing Vue.js, Vuetify, and Firebase. When the user clicks on "Add new note," a Vuetify dialog box pops up, prompting them to input data. Once they click save, the dialog box closes, and the inputted data is submitted and displayed on a task card on the screen. The task card includes a "view/edit" button that, when clicked, opens a second dialog box allowing the user to view and edit the data. The challenge I am facing is with the editing functionality. Currently, I have set up the "view/edit" button to trigger a modal using an @click event. I also need this @click event to bind the data from a selected task card to the second dialog box for editing. I attempted to achieve this by setting up the @click event like so:
<v-btn color="primary" dark @click.stop="dialogUpdate = true; editTodo(todo)">
View/Edit
</v-btn>
While this setup works fine, I am uncertain whether it is a good practice to include two functions in one click event. After researching other resources on Stack Overflow, there were suggestions that this may not be ideal. If this is incorrect, how would you propose configuring the "view/edit" button so that opening the second dialog box also triggers the editTodo function? Below is my complete code. Thank you for your assistance!
<template>
<div id="app" data-app>
<v-layout justify-center>
<v-btn color="primary" dark @click.stop="dialog = true">
Add New Note
</v-btn>
<!-- Remaining code for dialogs and task cards goes here -->
</v-layout>
<v-container>
<v-flex md12 class="elevation-0">
<v-layout wrap>
<v-flex md3 v-for="todo in todos" :key="todo.id">
<v-card color="#f9efaf" class="card-container">
<textarea-autosize v-model="todo.title" class="todo-text" readonly style="width: 60%"></textarea-autosize>
<textarea-autosize v-model="todo.text" class="todo-text" readonly></textarea-autosize>
<v-btn @click="deleteTodo(todo.id)">Delete</v-btn>
<v-btn color="primary" dark @click.stop="dialogUpdate = true; editTodo(todo)">
View/Edit
</v-btn>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-container>
</div>
</template>
<script>
import { todosCollection } from './firebase';
import { mapState } from 'vuex'
export default {
name: 'app',
created() {
this.getData();
},
data () {
return {
todos: [],
newTitle: '',
newTodo: '',
currentlyEditing: null,
todoEditTitle: '',
todoEditText: '',
dialog: false,
dialogUpdate: false
}
},
methods: {
// Remaining methods and functions go here
}
}
</script>
<style>
// CSS styling goes here
</style>
SOLUTION:
<v-btn color="primary" dark @click.stop="editTodo(todo)">
View/Edit
</v-btn>
editTodo(todo) {
this.dialogUpdate = true
this.currentlyEditing = todo.id
this.todoEditText = todo.text
this.todoEditTitle = todo.title
},