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

Question

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

我在每个输入上都添加了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>