javascript - 如何在VueJS中传递props？

Question

我的应用程序中有一个简单的设置，由 2 个组件组成。 HelloWorld 组件，然后是对话框组件。对话框组件接受从 HelloWorld 组件传递的 props。 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>

感谢所有的帮助。谢谢。

Answer 1

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