在 vue 的输入中使用 @change 更新 Firestore 数据

Question

希望这是我刚刚忽略的一个简单的问题。在我的管理视图中，我目前在一个表中列出了我的用户，其中包含来自 firestore 的集合的数据。我的一个专栏包含一个输入，我将他们当前的播放列表 ID 传递给喜欢：

<input
  type="text"
  name="playlist"
  placeholder="Playlist Id"
  rows="1"
  v-model="user.playlist"
  @change="changePlaylist(user.id, $event)"
>

在我的 data() 中，我也将播放列表设置为“null”。数据当前存在于播放列表输入中的输入“内部”。我希望使用@change，所以当管理员更改播放列表 id 时，它将调用云函数来更新 firestore 集合中的 id。

exports.setUserPlaylist = functions.https.onCall(async (data, context) => {

  if (!context.auth.token.admin) return

  try {
    var _ = await admin.auth().setCustomUserClaims(data.uid, data.playlist)

    return db.collection("roles").doc(data.uid).update({
      playlist: data.playlist
    })

  } catch (error) {
    console.log(error)
  }

});

我添加了一个方法 changePlaylist，其中包含：

        changePlaylist(uid, event) {
            var addMessage = firebase.functions().httpsCallable("setUserPlaylist");

            var data = { uid: uid, playlist: event.target.value};

            addMessage(data)
                .then(function(result) {
                    console.log(result);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }

但是，当我转到控制台时，我只得到：{data: null}。显然我做错了什么，对于我的一生，我找不到一个很好的解决方案来处理这个问题。

更新 我没有意识到有一个@input，但不幸的是我无法让它工作。然后，我尝试通过将输入和功能更改为：

<input
  type="text"
  name="playlist"
  placeholder="Playlist Id"
  rows="1"
  v-model="user.playlist"
 >

我的按钮：

<button type="button" @click="changePlaylist(user.id)">Save Playlist</button>

最后是我的功能：

        changePlaylist(uid) {
            var addMessage = firebase.functions().httpsCallable("setUserPlaylist");

            var data = { uid: uid, playlist: this.playlist};

            addMessage(data)
                .then(function(result) {
                    console.log(result);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }

不幸的是，它只是清除了输入，实际上并没有数据被发送到 firestore。我刚刚完全错过了什么吗？

Answer 1

你应该使用观察者，查看关于观察者的 Vue 文档。

https://vuejs.org/v2/guide/computed.html#Watchers

您的观察者示例如下：

watch: {
  'user.playlist': {
    handler(val) {
     //execute firebase update
    }
  }
}