CODEWITHSUNDEEP
javascriptvue.jsvuexvuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1348

How to pass props in VueJS?

I have a simple setup in my App which consists of 2 components. The HelloWorld component and then a dialog component. The dialog component accepts props passed from the HelloWorld component. The data in HelloWorld is being rendered by looping over an array. What i am trying to achieve is when i click on one of the elements i want the dialog to be pre filled with the name and age of the element i clicked on. I am not sure how i can do that?

Check out this CodeSandbox for the complete Setup.

This is my Vuex Store:-

state: {
    userData: [
      {
        name: "Sam",
        age: "24"
      },
      {
        name: "Max",
        age: "28"
      }
    ],
    dialog: false
  },
  getters: {
    getUserData: state => state.userData,
    getDialog: state => state.dialog
  },
  mutations: {
    openDialog(state) {
      state.dialog = true;
    }
  }

This is my HelloWorld Component:-

<template>
  <v-container>
    <v-layout justify-center>
      <v-card>
        <v-card-text>
          <div v-for="user in getUserData" :key="user.age">
            <span>{{user.name}}</span>
            <span>{{user.age}}</span>
            <v-icon @click="openDialog">create</v-icon>
          </div>
        </v-card-text>
      </v-card>
    </v-layout>
    <Dialog/>
  </v-container>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import Dialog from "./Dialog";
export default {
  name: "HelloWorld",
  components: {
    Dialog
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      getUserData: "getUserData"
    })
  },
  methods: {
    ...mapMutations({
      openDialog: "openDialog"
    })
  }
};
</script>

This is my Dialog Component:-

<template>
  <v-dialog v-model="getDialog" max-width="300px">
    <v-card>
      <v-card-text>
        <v-text-field v-model="title"></v-text-field>
        <div class="mt-5">{{age}}</div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    title: {
      type: String
    },
    age: {
      type: Number
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      getDialog: "getDialog"
    })
  }
};
</script>

Appreciate all the help. Thank you.

Upvotes: 0

Views: 595

Answers (1)

Himanshu
Himanshu

Reputation: 274

<div v-for="(user, index) in getUserData" :key="user.age">
        <span>{{user.name}}</span>
        <span>{{user.age}}</span>
        <v-icon @click="openDialogAndGetCurrentUser(index)">create</v-icon>
 </div>
openDialogAndGetCurrentUser(index) {
   this.openDialog();
   /* define these in your data to be passed to child */
   this.currentuserName = this.getUserData[index].name;
   this.currentuserAge = this.getUserData[index].age;
}
<Dialog 
  :title="currentuserName"
  :age="currentuserAge"/>

Upvotes: 1

Related Questions