Vue将数据从组件传递到另一个组件

Question

我正在为用户创建“创建帐户”流程，但我无法将数据从一个组件传递到另一个组件。第一个组件具有带有“租户”、“房东”、“承包商”选项的单选按钮。一旦用户选择“租户”，那么数据应该传递到下一步，在那里他们填写一个带有名称和所有好东西的表格。一旦他们提交，它们应该一起进入后端。

acc-for.vue 下面带有单选按钮组件。

<template>
  <div>
    <v-app
      style="background-image: url('https://blog.modsy.com/wp-content/uploads/2019/06/D2_Full.jpg')"
    >
      <v-container class="pa-12">
        <v-row>
          <v-card class="pa-16">
            <v-card-title>
              Are you a?
            </v-card-title>
            <v-radio-group v-model="selectedValue" @change="selectedAcc">
              <v-radio
                v-for="account in accountType"
                :key="account.name"
                :value="account.name"
                :label="account.name"
              ></v-radio>
            </v-radio-group>
            <v-row>
              <v-btn rounded color="black" class="white--text" href="/login"
                >Back</v-btn
              >
              <v-btn
                rounded
                color="black"
                class="white--text"
                @click="selected(accountSelected)"
                >Next</v-btn
              >
              <!-- href="/create-acc" -->
            </v-row>
          </v-card>
        </v-row>
      </v-container>
    </v-app>
  </div>
</template>
<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      selectedValue: false,
    };
  },
  computed: {
    accountType() {
      return this.$store.state.accountType;
    },
    selected() {
      return this.$store.state.selectedAccType;
    },
  },
  methods: {
    ...mapMutations(["SELECTED_ACCOUNT_TYPE"]),

    selectedAcc(e) {
      this.$emit("selected-accountType", e);
    },
  },
};
</script>
<style></style>

createAccount.vue 这个组件有fName 和lName 的形式以及所有好东西..

<template>
  <div>
    <v-app
      style="background-image: url('https://blog.modsy.com/wp-content/uploads/2019/06/D2_Full.jpg')"
    >
      <v-container class="pa-12">
        <v-row>
          <v-card class="pa-16">
            <v-card-title>
              {{ selectedTypeUser }}
            </v-card-title>
            <v-form>
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_fName"
                label="First Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_lName"
                label="Last Name"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_email"
                label="Email"
              />
              <v-text-field
                class="pa-4"
                type="text"
                v-model="newUser_password"
                label="Password"
              />
              <v-row>
                <v-btn rounded color="black" class="white--text" href="/acc-for"
                  >Back</v-btn
                >
                <v-btn
                  @click="registerUser"
                  rounded
                  color="black"
                  class="white--text"
                  >Next</v-btn
                >
              </v-row>
            </v-form>
          </v-card>
        </v-row>
      </v-container>
    </v-app>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      newUser_fName: "",
      newUser_lName: "",
      newUser_email: "",
      newUser_password: "",
    };
  },

  methods: {
    ...mapMutations(["ADD_USER"]),
    registerUser() {
      let config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      axios
        .post(
          "http://localhost:7876/createUser",
          {
            fName: this.newUser_fName,
            lName: this.newUser_lName,
            email: this.newUser_email,
            password: this.newUser_email,
          },
          config
        )
        .then((response) => {
          console.log(response.statusText);
        })
        .catch((e) => {
          console.log("Error: ", e.response.data);
        });
    },
  },
};
</script>

store.js（状态）在下面

// import vue from "vue";
import vuex from "vuex";
import axios from "axios";
import Vue from "vue";

Vue.use(vuex, axios);

export default new vuex.Store({
    state: {
        users: [],
        accountType: [
            { name: "Tenant" },
            { name: "Landlord" },
            { name: "Contractor" }
        ],
        selectedAccType: [],
    },
    mutations: {
        ADD_USER: (state, payload) => {
            state.users.push(payload.user);
        },
        SELECTED_ACCOUNT_TYPE: (state, payload) => {
            state.selectedAccType.push(payload)
        }
    },
    actions: {
        addUser: ({ commit }, payload) => {
            commit("ADD_USER", payload);
        },
        selectAcc: ({ commit }, payload) => {
            commit("SELECTED_ACCOUNT_TYPE", payload)
        }
    },
    // getters: {
    //     addAccountType(state, e) {
    //         state.accountType.push(e)
    //     },
    // },
});

Answer 1

我在按钮上看到了这个：

<v-btn rounded
            color="black"
            class="white--text"
            @click="selected(accountSelected)"
            >Next</v-btn
          >

但我在您附加的代码中没有找到具有该名称的方法。仔细检查您的姓名是否全部匹配，并且您在点击事件中调用了正确的函数。