如何在 vue 中呈現 axios 響應上的組件？

Question

當 axios 響應出現Add組件時，有組件Add和index我想渲染（實際上替換） index組件

添加組件

<template>
  <div>
    <v-container fluid>
      <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
        <v-col cols="8">
          <v-card>
            <v-card-title>
              Add Project
              <v-spacer></v-spacer>
            </v-card-title>
            <v-card-text>
              <v-col cols="6">
                <v-text-field label="URL" class="mb-4" v-model="form.url"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-text-field label="Name" v-model="form.name"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-text-field label="Secret Key" v-model="form.secret"></v-text-field>
              </v-col>
              <v-btn type="submit" color="primary" class="ml-4">Save</v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-form>
    </v-container>
  </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import { api } from "~/config";
import Form from "~/mixins/form";

export default {
  mixins: [Form],
  data: () => ({
    passwordHidden: true,

    // label: {
    //   password: 'New Password',
    //   password_confirmation: 'Confirm New Password',
    // },

    form: {
      name: null,
      url: null,
    },
  }),

  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;

        axios
          .post(api.path("addProject"), this.form)
          .then((res) => {

            this.$toast.success('Your profile successfully updated.')
            console.log(res);
          })
          .catch((err) => {
            this.handleErrors(err.response.data.errors);
          })
          .then(() => {
            this.loading = false;
          });
      }
    },
  }
 
};
</script>

索引組件的路徑是

從 $comp/projects/Index.vue 導入索引

Answer 1

當 axios 響應出現Add組件時，有組件Add和index我想渲染（實際上替換） index組件

添加組件

<template>
  <div>
    <v-container fluid>
      <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
        <v-col cols="8">
          <v-card>
            <v-card-title>
              Add Project
              <v-spacer></v-spacer>
            </v-card-title>
            <v-card-text>
              <v-col cols="6">
                <v-text-field label="URL" class="mb-4" v-model="form.url"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-text-field label="Name" v-model="form.name"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-text-field label="Secret Key" v-model="form.secret"></v-text-field>
              </v-col>
              <v-btn type="submit" color="primary" class="ml-4">Save</v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-form>
    </v-container>
  </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import { api } from "~/config";
import Form from "~/mixins/form";

export default {
  mixins: [Form],
  data: () => ({
    passwordHidden: true,

    // label: {
    //   password: 'New Password',
    //   password_confirmation: 'Confirm New Password',
    // },

    form: {
      name: null,
      url: null,
    },
  }),

  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;

        axios
          .post(api.path("addProject"), this.form)
          .then((res) => {

            this.$toast.success('Your profile successfully updated.')
            console.log(res);
          })
          .catch((err) => {
            this.handleErrors(err.response.data.errors);
          })
          .then(() => {
            this.loading = false;
          });
      }
    },
  }
 
};
</script>

索引組件的路徑是

從 $comp/projects/Index.vue 導入索引