我有一个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时,它正在工作。可能是什么问题呢?谢谢。