CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestore
Mustafa
Mustafa

Reputation: 41

Vue js don't get the route params when you click on button. Update user from firestore

I want to update the username with firestore but I don't get the url of the document. What only works is that I can only update the data of the user that is now logged in. But I want to access all of the user and update them.

Here is the (router-link) button

<tbody>
    <tr v-for="Profiles in Profile" :key="Profiles.id">
      <td>{{Profiles.username}}</td>
      <td>{{Profiles.email}}</td>
      <td>{{Profiles.userId}}</td>
      <td>{{Profiles.role}}</td>
      <td>{{Profiles.haveAccess}}</td>
      <td>{{Profiles.createdAt}}</td>
      <router-link :to="{ name: 'Update', params: {id: Profiles.id} }" class="btn btn-warning removeUnderline">
        <v-btn color="warning" small class="mt-2">Update</v-btn>
      </router-link>
   </tr>
</tbody>

This is my router file

 {
    name: 'Update',
    path: '/Update/:id',
    component: Update,
    props: route => ({
      profile: route.params.id // maps route param "id" to prop "profileId"
    })
  },

And my Update.vue file

    <div>
        <h1>update</h1>
        <v-form v-on:submit.prevent="update">
            <v-container>
                <v-text-field
                    type="text"
                    v-model="username"
                    :counter="10"
                    required
                ></v-text-field>
                <input type="submit" @click="update" class="btn primary mt-3" value="Save"/>
            </v-container>
        </v-form>
    </div>
</template>

<script>
/*eslint-disable-line*/import { db } from '../../Database';
import firebase from 'firebase';
export default {
    props: { profileId: String },
    data() {
        return {
            Profile: [],
            username: ''
        }
    },
    methods: {
        async update() {
            // const data = {
            //     username: this.username,
            // };
            // const res = await db.collection('Profile').doc(/*this.profileId*/this.currentUser.toString()).update({
            //     username: this.username
            // });
            await db.collection('Profile').doc(String(this.profileId)).update({
                username: this.username
            });
            console.log('updated' + firebase.auth().currentUser.uid)
            // console.log(res + data)
        }
    },
    firestore: {
        Profile: db.collection('Profile')
    }
}
</script>

My firestore database enter image description here

The error what I get after with the new code

enter image description here

I got now the document of the Firestore

http://localhost:8080/Update/bRiKnCX6LVQoxotLywp9zO9UctF3

Upvotes: 1

Views: 890

Answers (1)

Phil
Phil

Reputation: 164834

First, I think the property you want to use is id, not .key (see the examples at https://vuefire.vuejs.org/vuefire/binding-subscriptions.html#using-the-data-bound-by-vuefire)

<tr v-for="userProfile in Profile" :key="userProfile.id">
  <td>{{userProfile.username}}</td>
  <td>{{userProfile.email}}</td>
  <td>{{userProfile.userId}}</td>
  <td>{{userProfile.role}}</td>
  <td>{{userProfile.haveAccess}}</td>
  <td>{{userProfile.createdAt}}</td>
  <td> <!-- 👈 you were missing a TD here -->
    <router-link
      :to="{ name: 'Update', params: { id: userProfile.id } }"
      class="btn btn-warning removeUnderline"
    >
      <v-btn color="warning" small class="mt-2">Update</v-btn>
    </router-link>
  </td>
</tr>

Now, get Vue Router to pass the id route param to your component as a prop

// route file
{
    name: 'Update',
    path: '/Update/:id',
    component: Update,
    props: route => ({
      profileId: route.params.id // maps route param "id" to prop "profileId"
    })
},

// Update.vue
export default {
  props: { profileId: String },
  // etc
}

Now instead of using this.currentUser, use this.profileId to use the ID passed in via the URL.

await db.collection('Profile').doc(this.profileId).update({
  username: this.username
});

See Passing Props to Route Components.

Upvotes: 2

Related Questions