时间戳

首页 > 解决方案 > Vue.js - 在模式内引用输入以更新 Firestore 数据库

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

问题描述

Comp.js

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

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

HTML 文件

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

函数.js

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

错误

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

根据 ITTUS 的建议更新代码：

所以根据下面的 Ittuss 建议，我尝试通过 Update 按钮内的 emit 传递给项目，我这样做是因为我想传递按钮上方的所有输入值来更新 Firestore 数据库。

Comps.js

我将 cuisedit 更改为：

html

我将 .js 中的函数更新为：

.js

但是，我收到一个错误，说我没有正确引用。

在此处输入图像描述

你知道为什么它没有抓取按钮发出的值吗？

标签： javascriptvue.jsargumentsgoogle-cloud-firestorevue-component

解决方案

在您的 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>

推荐阅读