Question

非常抱歉，但是我对vue.js还是陌生的，希望有人能帮助我。我正在尝试将数据从laravel-blade传递到vuejs文件。但是数据不会显示任何内容，当我尝试从调试器获取值时，只会得到未定义的值。我还尝试了已挂载的函数来检查数据，但仍未定义。

这是刀片文件

<main id="app-main">
    <center-details :data-type="{{ $data['type'] }}"></center-details>
</main>

app.js文件

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
window.Vue = require('vue');

const centerDetail = require('./components/center/detail.vue');

require('./mixin');

const routes = {
    '/center/detail': centerDetail,
}

/**
 * Element UI
 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-sales/index.css';
import locale from 'element-ui/lib/locale/lang/ja';
window.Vue.use(ElementUI, {locale});

/**
 * Datatables
 */
import VueDataTables from 'vue-data-tables';
window.Vue.use(VueDataTables);

var app = new Vue({
    el: '#app-main',
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
            return routes[this.currentRoute] || NotFound
        }
    },
    render (h) { return h(this.ViewComponent) }
});

vue组件文件

<template>
  <div>{{ dataType}}</div>
</template>

<script>
  export default {
    props: ['dataType'],
    mounted() {
      console.log(this.dataType);
    },
  }
</script>

将数据从laravel刀片传递到vue组件后，道具数据变得不确定

0 个答案: