如何在 vue.js 中使用@click 觸發兩個事件

Question

我正在使用 Vue.js、Vuetify 和 Firebase 構建一個任務管理器應用程序。 單擊“添加新筆記”會打開一個 Vuetify 對話框，提示用戶輸入數據。 單擊保存關閉對話框，同時將輸入的數據提交和呈現到屏幕上的任務卡。 呈現的任務卡包括一個“查看/編輯”按鈕，單擊該按鈕后，會打開第二個對話框供用戶查看和編輯數據。 我的問題是編輯。 我目前使用觸發模式的@click 事件設置了“查看/編輯”按鈕。 我需要這個 view/edit @click 事件來觸發一個函數，該函數將選定任務卡中的數據綁定到第二個對話框，然后可以對其進行編輯。 我試圖通過在“查看/編輯”按鈕中設置 @click 事件來實現這一點，如下所示：

<v-btn color="primary" dark @click.stop="dialogUpdate = true; editTodo(todo)">
   View/Edit
  </v-btn>

...如您所見，@click 事件包含“dialog = true”，用於切換 Vuetify 對話框，以及“editTodo(todo)”，用於觸發將輸入的數據綁定到第二個的 editTodo 函數對話框。 這目前工作正常，但我的問題是我不清楚是否應該向一個點擊事件添加兩個函數。 我研究過的其他 Stack Overflow 帖子表明這不是一個好的做法。 如果這是錯誤的，那么您建議如何配置“查看/編輯”按鈕，以便打開第二個對話框也觸發 editTodo 功能？ 我的完整組件如下。 謝謝！

<template>
  <div id="app" data-app>

    <v-layout justify-center>
      <v-btn color="primary" dark @click.stop="dialog = true">
        Add New Note
      </v-btn>

      <v-dialog v-model="dialog" max-width="290">
        <v-card color="#f9efaf">
          <v-form @submit.prevent="addTodo">
            <v-card-text>
              <textarea-autosize v-model="newTitle" :min-height="50" placeholder="add title"></textarea-autosize>
              <textarea-autosize v-model="newTodo" type="text" style="width: 100%" :min-height="100" placeholder="add note"></textarea-autosize>
            </v-card-text>
            <v-btn type="submit" color="green darken-1" text @click="dialog = false">
              Add
            </v-btn>
          </v-form>
          <v-card-actions>
            <v-spacer></v-spacer>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-dialog v-model="dialogUpdate" max-width="290">
        <v-card color="#f9efaf">
          <v-form @submit.prevent="updateTodoText">
            <v-card-text>
              <textarea-autosize v-model="todoEditTitle" :min-height="50" placeholder="add title"></textarea-autosize>
              <textarea-autosize v-model="todoEditText" type="text" :min-height="100" placeholder="add note"></textarea-autosize>
            </v-card-text>
            <v-btn type="submit" color="green darken-1" text @click="dialogUpdate = false">
              Update
            </v-btn>
          </v-form>
          <v-card-actions>
            <v-spacer></v-spacer>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </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: {
    getData(){
      const todos = []
      todosCollection.orderBy('createdAt').get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          let userData = doc.data()
          userData.id = doc.id
          todos.push(userData)
        })
        this.todos = todos
      })
    },
    addTodo() {
      todosCollection.add({
        title: this.newTitle,
        text: this.newTodo,
        createdAt: new Date()
      })
      .then(() => {
        this.newTitle = '',
        this.newTodo = ''
      })
    },
    deleteTodo(id) {
      todosCollection.doc(id).delete()
      .then(() => {
        console.log('Document successfully deleted')
      })
      .then(() => {
        this.getData()
      })
    },
    editTodo(todo) {
      this.currentlyEditing = todo.id
      this.todoEditText = todo.text
      this.todoEditTitle = todo.title
    },
    updateTodoText() {
      todosCollection.doc(this.currentlyEditing).update({
        text: this.todoEditText,
        title: this.todoEditTitle
      })
      .then(() => {
        this.getData()
      })
      .catch(function(error) {
        console.error("Error updating document text: ", error);
      });
      this.currentlyEditing = null;
      this.todoEditText = '';
      this.todoEditTitle = '';
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
.card-container {
  margin: 10px;
  padding: 10px;
}
</style>

解決方案：

 <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
 },

Answer 1

這就是解決方案。 dialogUpdate = true 應該包含在 editTodo() 函數中，以及用於將輸入數據綁定到第二個對話框的代碼。

<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
 },