Updating firestore data using @change on input in vue

Question

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?

tony19 · Accepted Answer · 2022-07-15 01:07:17Z

2

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

edited Jul 15, 2022 at 1:07

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 6, 2020 at 19:03

Cre

811 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Updating firestore data using @change on input in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related