Обновление данных firestore с использованием @change при вводе в vue

Question

Надеюсь, это простой вопрос, который я просто упустил из виду. В моем представлении администратора я сейчас перечисляю своих пользователей в таблице с данными из коллекции из firestore. Один из моих столбцов содержит вход, в котором я передаю их текущий идентификатор списка воспроизведения, чтобы ему понравилось:

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

В моих данных () у меня также есть список воспроизведения, установленный на «null». Данные в настоящее время присутствуют «внутри» ввода во вводе списка воспроизведения. Я надеялся использовать @change, поэтому, когда администратор изменяет идентификатор списка воспроизведения, он будет вызывать облачную функцию для обновления идентификатора в коллекции firestore.

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

Однако, когда я go выхожу на консоль, я просто получаю: {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
    }
  }
}