我最近开始将我的 laravel 8 项目转换为 VueJS,但它似乎没有呈现它的模板内容。
好吧,我使用以下命令来包含 Vue 的基本结构:php artisan ui vue && npm install
app.js:
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
主视图:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body id="app">
<example-component></example-component>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Npm 构建运行良好,没有错误。但不幸的是,模板内容在前端是不可见的。我看到的一切都是 vue-tag 本身,例如:
提前致谢!
答案 0 :(得分:2)
根组件不应安装在 body 元素中,您必须执行以下操作:
const original = [{
id: 4,
name: 'test',
docs: [{
id: 1,
name: 'abc'
}, {
id: 2,
name: 'xyz'
}]
}, {
id: 8,
name: 'test2',
docs: [{
id: 1,
name: 'abc'
}, {
id: 2,
name: 'xyz'
}]
}];
const updates = original.map(currentObject => {
const newObject = Object.assign(currentObject);
const newDocs = newObject.docs.map(doc => {
const newDoc = Object.assign(doc);
if (newDoc.name === "xyz") {
newDoc.name = "xyz123";
}
return newDoc;
});
newObject.docs = newDocs;
return newObject
});
console.log(updates);
并从 <body >
<div id="app">
<example-component></example-component>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
中删除 default
:
window.Vue = require('vue').default;