使用vue路由器将Laravel数据传递到Vue组件

时间:2020-09-09 12:13:32

标签: javascript laravel vue.js vue-router

我有一个laravel集合,应该将json数据传递给vue组件

 $problems = $maintenance->getMaintenanceTypes();

 return new MaintenanceTypesCollection($problems);

然后我要使用该json集合创建一个单选按钮

<div v-for="m_type in maintenance_types" :key="m_type.id">
              <input type="radio" v-model="form.m_type" :value="m_type.id" :id="m_type.id">
              <label :for="m_type.id">{{ m_type.problem }}</label>
  </div>

当我使用Laravel Web路由时,数据传递良好,但是当我切换到Vue路由器时,数据根本没有传递。

作为参考,这是我的路线/api.php

Route::get('/maintenance/types', 'Maintenance\MaintenanceTypesController@index');

这是我的Vuex商店

import axios from 'axios'
import { data } from 'jquery'

export default {

namespaced: true,

state:{
    maintenance_types: []
},

getters:{

    maintenance_types (state) {
        return state.maintenance_types
    }

},

mutations:{
    PUSH_M_TYPE (state, data) {
        state.maintenance_types.push(...data)
    }
},

actions:{
    async getMaintenanceTypes ({ commit }) {
            let response = await axios.get('/maintenance/types')

            commit('PUSH_M_TYPE', response.data.data)
    }

}

}

这是我的Vue组件脚本逻辑


import { mapGetters, mapActions } from 'vuex'
import axios from 'axios'

export default {
    data () {
        return {
            form: {
                description: '',
                m_type: ''
            }
        }
    },

    computed: {
        ...mapGetters({
            maintenance_types: 'maintenance/maintenance_types'
        })
    },

    methods: {
        ...mapActions({
            getMaintenanceTypes: 'maintenance/getMaintenanceTypes'
        }),

       async submit () {
           await axios.post('/api/maintenance/store', this.form)
        }
    },

    mounted () {
        this.getMaintenanceTypes()
    }

}

当我使用此Vue路由时,它不起作用

import AppMaintenanceForm from './components/maintenance/AppMaintenanceForm.vue'
export const routes = [
 {
        path: '/maintenance/form',
        component: AppMaintenanceForm,
        name: 'MaintenanceForm'

    },
]

但是当我切换到Laravel的routes / web.php时,它正在工作。可能是什么问题呢?谢谢。

0 个答案:

没有答案