Firebase 在vue中使用@change on输入更新firestore数据

希望这是一个简单的一个，我只是大量忽略。在我的管理视图中，我当前正在一个表中列出我的用户，其中包含来自firestore集合的数据。我的其中一列包含一个输入，我将其当前播放列表id传递给喜欢的人：

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

我在方法更改播放列表中添加了以下内容：

        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
  type="text"
  name="playlist"
  placeholder="Playlist Id"
  rows="1"
  v-model="user.playlist"
 >

---

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

您应该使用观察者，请查看有关观察者的Vue文档

您的观察者示例如下：

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

---

您应该使用观察者，请查看有关观察者的Vue文档

您的观察者示例如下：

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

        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);
                });
        }

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