我正在嘗試在 laravel 9 和 vueJS 3 中做一個組件。我的組件有一個資料表，為此我正在使用vue-good-table-next但我無法在我的刀片中顯示它我不知道我做錯了。
在我的網路瀏覽器中回傳這個：
[Vue warn]: There is already an app instance mounted on the host container.
If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.
在我的webpack.mix.js我有這個：
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
在我的 app.js 我有這個：
require('./bootstrap');
import { createApp } from "vue";
import datatableFisios from "./components/datatableFisios.vue";
createApp({
components: {
datatableFisios,
},
}).mount("#app");
我的組件是
<template>
<div>
<vue-good-table :columns="columns" :rows="rows"/>
</div>
</template>
<script>
export default {
name: 'datatableFisios',
mounted(){
console.log(`The initial count is.`)
},
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM do yy',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
};
</script>
PD：這是我第一次用 VUE 做資料表，如果有人知道比這更好的庫，請告訴我。
感謝自述檔案。和我糟糕的英語的大豆。
uj5u.com熱心網友回復：
為了解決我的問題，我必須用這個命令更新 vue-js-loadernpm update vue-loader我可以掛載我的組件并使用我的資料表vue-good-table-next
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486817.html
標籤：拉拉维尔 Vue.js Vuejs3 laravel-9