CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestore
Louis Stephens
Louis Stephens

Reputation: 105

Updating firestore data using @change on input in vue

Hopefully this is an easy one that I have just massively overlooked. In my admin view, I am currently listing out my users in a table with data from a collection from firestore. One of my columns contains an input where I am passing their current playlist id to like:

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

In my data() I have playlist set to "null" as well. The data is currently present "inside" the input in the playlist input. I was hoping to use @change so when an admin changes the playlist id, it will call a cloud function to update the id in the firestore collection. 


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

});

I have added in a method changePlaylist which contains:

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

However, when I go to console, I am just getting: {data: null}. Obviously I am doing something wrong, and for the life of me I can not find a good solution of how to handle this.

Update I didnt realize that there was an @input, but unfortunately I cant get that to work. I then tried changing my approach by changing my input and function to:

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

My button:

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

And finally my function:

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

Unfortunately, it just clears out the input and no data is actually being sent to firestore. Have I just missed something completely?

Upvotes: 0

Views: 406

Answers (1)

Cre
Cre

Reputation: 81

You should use a watcher, check out the Vue documentation about watchers.

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

An example of your watcher is below:

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

Upvotes: 2

Related Questions