Как передать реквизит в VueJS? - PullRequest
Новая
       17

Как передать реквизит в VueJS?

0 голосов
/ 01 мая 2020

У меня есть простая настройка в моем приложении, которая состоит из 2 компонентов. Компонент HelloWorld, а затем компонент диалога. Компонент диалога принимает props, переданный из компонента HelloWorld. Данные в HelloWorld обрабатываются циклически по массиву. То, чего я пытаюсь достичь, это когда я нажимаю на один из элементов, я хочу, чтобы диалоговое окно было предварительно заполнено именем и возрастом элемента, на который я нажал. Я не уверен, как я могу это сделать?

Проверьте это CodeSandbox для полной установки.

Это мой магазин Vuex: - 

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

Это мой HelloWorld компонент: - 

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

Это мой компонент диалога: - 

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

Цените всю помощь. Спасибо.

1 Ответ

1 голос
/ 01 мая 2020 
<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"/>
...