Vue.js - 在模式内引用输入以更新 Firestore 数据库

Question

所以上图是我在 comp.js（Vue 组件）中的代码，当用户单击“更新”按钮时，它将获取更新的输入并将其推送到 firestore。

我将 v-on:emit 放在每个输入上，并尝试在“更新”按钮上引用它。

这是我在 HTML 文件中的模态，我尝试将函数从 comp.js 连接到 function.js。

但是，上面的方法不起作用，它给了我下面的错误。

我不确定如何从每个输入中获取值并连接

根据 ITTUS 的建议更新代码：

因此，根据下面的 Ittuss 建议，我尝试通过 Update 按钮内的 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>