axios post方法后如何更改Vue組件

Question

我正在使用 Laravel 8 和 Vue 3 我有一個 SessionComponent.vue 並且上面有一個按鈕，我希望當我單擊該按鈕時，它會觸發 axios post 方法，讓我的 StudentComponent.vue 顯示.

我嘗試使用 vue-router，但它對我不起作用我有很多問題所以我想知道是否還有其他選項可以做這樣的簡單鏈接。

    /*This is My session Component*/

    <template>
        <h1 class="title_session">Choose or create a session</h1>
        <select id="session" name="session" @blur.prevent="getSessionName($event)">
            <option disabled selected value="">Select a session</option>
            <option v-for="card in cards" :key="card.id">{{ card.session }}</option>
        </select>

        <label for="createSession">Create a new session</label>
        <input id="createSession" ref="session" type="text" >

    <!--    <router-link to="/student">Test</router-link>

        <router-view></router-view>-->

    </template>

    <script>
    const AXIOS = 'http://127.0.0.1:8000/'
    export default {
        AXIOS: AXIOS,
        name: "Session.vue",
        data() {
            return {
                cards: {},
                sessionName: '',
            }
        },
        methods: {
            getSession() {
                axios.get(AXIOS + 'session')
                    .then(response => this.cards = response.data)
                    .catch(error => console.log(error));
            },
            createSession() {
                this.sessionName = this.$refs.session.value;
                console.log(this.sessionName)
                axios.post(AXIOS + 'session', {
                    sessionName: this.sessionName
                })
                    .then(response => this.sessionName = response.data)
                    .catch(error => console.log(error))
            },

            getSessionName(event) {
                this.sessionName = event.target.value;
                console.log(this.sessionName)
                axios.post(AXIOS + 'session', {
                    sessionName: this.sessionName
                })
                    .then(response => this.sessionName = response.data)
                    .catch(error => console.log(error))
            },
        },

        mounted() {
            console.log("How many time")
        },

        created() {
            this.getSession()
        },
        updated() {
            this.getSession()
        }
    }
    </script>

Answer 1

你的問題不清楚。 但是，如果您希望 SessionComponent 在單擊按鈕后顯示特定數據。 在你的 SessionComponent.vue 中

<!--- your html ----->
<div v-if="displayData"> {dataToDisplay} </div>
<!--- your html ----->
<button @click="ApiCall"> Display Data button </button>
<!--- your html ----->

在你的腳本方法中

Apicall () {
  yourApiCal((result) => {
  // do what you want with result and modify dataToDisplay accordingly
     this.displayData = true;
})
}

確保默認情況下 displayData 等於 false。