Vue.js - ссылка на вход внутри модального окна для обновления базы данных Firestore

Question

Таким образом, изображение выше - мой код внутри comp.js (компонент Vue), когда пользователь нажимает кнопку «Обновить», он захватывает обновленный ввод и отправляет его в хранилище.

Я включил v-on: emit для каждого входа и попытался сослаться на него кнопкой «Обновить».

Это мой модал внутри HTML-файла, я пытался подключить функцию из comp.js к function.js.

Однако описанные выше методы не сработали, и это дало мне ошибку ниже.

Я не совсем уверен, как получить значение с каждого входа и подключить

ОБНОВЛЕННЫЙ КОД, ОСНОВАННЫЙ НА ПРЕДЛОЖЕНИИ ITTUS:

Таким образом, основываясь на предложении Ittuss, приведенном ниже, я попытался передать элементам через emit внутри кнопки Обновить, я сделал это, потому что хочу передать все входные значения над кнопкой для обновления базы данных Firestore.

Я изменил cuisedit на это:

И я обновил функцию в .js так:

Тем не менее, я получил сообщение о том, что не правильно ссылаюсь.

Знаете ли вы, почему он не захватывает значение, излучаемое кнопкой?

Answer 1

В вашем компоненте cuiseedit $emit должен содержать только 1 дополнительный параметр:

<button @click="$emit('some-change', obj2.id)"></button>

и в компоненте:

<transition name="fade">
  <cuisedit v-if="showModal" :obj2="cuisinemodal" @some-change="updateData">
  </cuisedit>
</transition>

updateData: function (id) {
  firestore.collection("koreanbap-cuisines").doc(id).update()....
}

Примечание

Если вы хотите передать больше данных, вы должны связать их с объектом

<button @click="$emit('some-change', {id: obj2.id, event: $event})"></button>