i´m trying to do a component in laravel 9 and vueJS 3. And my component have a datatable and for this i´m using vue-good-table-next but i can´t show it in my blade i don´t know that i´m doing wrong.
in my web browser return this:
[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.
in my webpack.mix.js i have this:
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
in my app.js i have this:
require('./bootstrap');
import { createApp } from "vue";
import datatableFisios from "./components/datatableFisios.vue";
createApp({
components: {
datatableFisios,
},
}).mount("#app");
and my component it´s
<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: it´s first time that i´m doing datatables with VUE, if anybody know any library better than this, say me please.
thanks for readme. and soyy for my bad english.
To resolve my problem i had to update vue-js-loader with this command npm update vue-loader with this i can mount my component and to do my datatable with vue-good-table-next
Related
Using Vuetable-2 with laravel but keep getting the error
[Vue warn]: Unknown custom element: <vuetable-field-component:account-details> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
For both the the account-details and account-actions components.
Even though i have already registered the components. Here is the code.
// TableAccounts.vue
<template>
<base-vuetable :api-url="route" :fields="fields" :sort-order="sortOrder">
</base-vuetable>
</template>
<script>
import BaseVuetable from './BaseVuetable.vue';
import AccountActions from './AccountActions.vue';
import AccountDetails from './AccountDetails.vue';
Vue.component('account-actions', require('./AccountActions.vue').default);
Vue.component('account-details', require('./AccountDetails.vue').default);
let fields = [
{
name: '__component:account-details',
title: '',
},
{
name: 'email',
title: 'Email',
sortField: 'email',
callback: (value) => this.email(value)
},
{
name: 'fullname',
title: 'Fullname',
sortField: 'fullname'
},
{
name: 'company',
title: 'Company',
sortField: 'company',
},
{
name: 'role_name',
title: 'Role',
sortField: 'type'
},
{
name: 'active',
title: 'Status',
sortField: 'active',
callback: (value) => this.active(value)
},
{
name: 'signed_in_at',
title: 'Last Login',
sortField: 'signed_in_at',
callback: (value) => this.fromNow(value)
},
{
name: 'updated_at',
title: 'Last update',
sortField: 'updated_at',
callback: (value) => this.fromNow(value)
},
{
titleClass: 'account__actions-button',
name: '__component:account-actions',
title: '',
}
]
export default {
components: {
BaseVuetable,
AccountActions,
AccountDetails
},
props: {
route: {
type: String,
default: ''
}
},
data() {
return {
fields,
sortOrder: [
{
field: 'updated_at',
sortField: 'updated_at',
direction: 'desc'
}
],
}
}
...
}
Any idea why? I have even registred the components globally. If i debug the global components they are there.
This is the code I used from material UI site. Every time I edit something, pressing ENTER or TAB will result in the following warning and won't proceed to next cell. Any ideas? TIA!
index.js:1 Warning: This synthetic event is reused for performance
reasons. If you're seeing this, you're accessing the method key on a
released/nullified synthetic event. This is a no-op function. If you
must keep the original synthetic event around, use event.persist().
import * as React from 'react';
import { DataGrid } from '#mui/x-data-grid';
function getFullName(params) {
return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
}
function setFullName(params) {
const [firstName, lastName] = params.value.toString().split(' ');
return { ...params.row, firstName, lastName };
}
export default function ValueGetterSetterGrid() {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={defaultRows} columns={columns} />
</div>
);
}
const columns = [
{ field: 'firstName', headerName: 'First name', width: 130, editable: true },
{ field: 'lastName', headerName: 'Last name', width: 130, editable: true },
{
field: 'fullName',
headerName: 'Full name',
width: 160,
editable: true,
valueGetter: getFullName,
valueSetter: setFullName,
sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
},
];
const defaultRows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon' },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei' },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime' },
{ id: 4, lastName: 'Stark', firstName: 'Arya' },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
];
Hi guys new coder here... just need some help.
I want to display a nested data in vue having vuetify
here is my data:
{
"data": [
{
"id": 1,
"customer": {
"id": 88,
"name": "David Zulauf III",
"mobile": "240-545-5366 x7059"
},
"item": "rau",
"qty": "4",
"fit": {
"name": "fourth"
},
"shop": "Metz, Cole and McKenzie"
},
],
}
I am using Laravel as a back end. not sure about the proper term but I used the Laravel resource functionality to somewhat relate my table together that's why I got this nested data.
this is my vue file and I used vuetify data tables to display the above data
<script>
export default {
data () {
return {
search: '',
dialog: false,
edit:false,
items:[],
headers: [
{text: 'customer',align: 'start',sortable: false,value: 'customer',},
{ text: 'item', value: 'item' },
{ text: 'qty', value: 'qty' },
{ text: 'fit', value: 'fit' },
{ text: 'shop', value: 'shop' },
],
}
},
created(){
this.fetchItems();
},
methods: {
fetchItems(){
axios.get('api/item')
.then(res=>{
this.items = res.data.data;
});
}
}
}
</script>
<template>
<v-card>
<v-card-title>
Items
<v-spacer></v-spacer>
<v-btn depressed color="primary" #click="addNew"> ADD</v-btn>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table :headers="headers" :items="items" :search="search"></v-data-table>
</v-card>
</template>
thank you for the help guys.
You could provide a path to that nested properties like :
headers: [
{text: 'name',align: 'start',sortable: false,value: 'customer.name',},
{text: 'mobile',align: 'start',sortable: false,value: 'customer.mobile',},
{ text: 'item', value: 'item' },
{ text: 'qty', value: 'qty' },
{ text: 'fit name', value: 'fit.name' },
{ text: 'shop', value: 'shop' },
],
Also you can completely customise your Datatable using "item" slot and others, you can look through Vuetify documentation for getting more details.
It can be more complicated but helps when you need to get both values in same column or get different nested levels in one column.
I tried to add Quill Emojis to editor but I am getting console error as
Uncaught ReferenceError: Quill is not defined
I am using Laravel 5.6 and vue js and definately new to vue and its components so I may sound silly to you but for the past 3 days I am searching on the google for the solution and even contacted author of vue2editor on github here is the link
This is what I have tried so far:
vue2editor.vue
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor, Quill } from 'vue2-editor';
import Emoji from 'quill-emoji/dist/quill-emoji';
Quill.register('modules/quill-emoji', Emoji);
export default {
name: 'vue2editor',
components: { VueEditor },
data() {
return {
content: "<h1>Some initial content</h1>",
editorSettings: {
modules: {
toolbar: {
container: [
[{'size': ['small', false, 'large']}],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video'],
['emoji'],
],
handlers: {
'emoji': function () {}
},
},
toolbar_emoji: true,
short_name_emoji: true,
textarea_emoji:true,
},
},
text: null,
};
},
};
</script>
I even tried the method mentioned by one of the user on github for Quill-Emoji, here is the link.
I came here with lots of hopes; if anyone here is to help me out, at least tell me what I am missing will be more than a help for me.
Quill.register({
'formats/emoji': Emoji.EmojiBlot,
'modules/short_name_emoji': Emoji.ShortNameEmoji,
'modules/toolbar_emoji': Emoji.ToolbarEmoji,
'modules/textarea_emoji': Emoji.TextAreaEmoji}, true);
you need register the model, add the up code to you code.
Edit:
//1) Add plugin to laravel mix
const mix = require('laravel-mix')
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
})
]
};
});
//2 example vue file
<template>
<div class="mt-1">
<vue-editor
ref="editor"
v-model="content"
:editor-toolbar="customToolbar"
:editorOptions="editorSettings"
/>
</div>
</template>
<script>
import { VueEditor, Quill } from "vue2-editor";
import Emoji from "quill-emoji/dist/quill-emoji";
Quill.register("modules/emoji", Emoji);
export default {
components: {
VueEditor,
},
props: {
bubble: Object,
contentCol: {
type: String,
},
},
data() {
return {
edit: false,
content: "<b>Content is here</b>",
customToolbar: [["bold", "italic", "underline"], ["link"], ["emoji"]],
editorSettings: {
modules: {
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
},
},
};
},
beforeDestroy() {},
};
</script>
<style src="quill-emoji/dist/quill-emoji.css"/>
New to both angular and kendo-ui
Below is the code, all the data except the startTime and endTime doesn't show up on the Kendo-ui Grid.Using Angular 5, Kendo-ui and ASP.Net Core 2, EF Core.
Below is the HTML,ts and sample data
dailyMachineNotes.component.html
<div>
<kendo-grid [kendoGridBinding]="breakDownData"
[filterable]="true"
scrollable="true">
<kendo-grid-column *ngFor="let column of columns"
field="{{column.field}}"
title="{{column.title}}"
format="{{column.format}}"
filter="{{column.type}}">
</kendo-grid-column>
</kendo-grid>
</div>
dailyMachineNotes.component.ts
export class dailyMachineNotes{
public breakDownData: BreakDownDataModel[];
baseURL: string;
public columns: ColumnSetting[] = [
{ field: 'machineId', title: 'Machine Id',type: 'text'},
{ field: 'breakDownType', title: 'break Down Type', type: 'text' },
{ field: 'notes',title: 'Notes',type: 'text' },
{ field: 'startTime', format: '{0:yyyy-MM-dd HH:mm}',
title: 'Start Time', type: 'date' },
{ field: 'endTime',format: '{0:yyyy-MM-dd HH:mm}',
title: 'End Time',type: 'date' } ];
constructor(http: Http, #Inject('BASE_URL') baseUrl: string) {
this.http.get(baseUrl + 'dailyMachineNotes/GetdailyMachineNotes').subscribe(result => {
this.breakDownData = result.json() as BreakDownDataModel[];
}, error => console.error(error));
}
}
interface ColumnSetting {
field: string;
title: string;
format?: string;
type: 'text' | 'numeric' | 'boolean' | 'date';
}
BreakDownDataModel.ts
export const BreakDownDataModel= [
{ "machineId": 1, "breakDownType": "Change1",
"notes": test1, "startTime": 2018-04-13 09:05:00.000,
"endTime": 2018-04-13 09:45:00.000 },
{ "machineId": 2, "breakDownType": "Change2",
"notes": test2, "startTime": 2018-04-11 08:40:00.000,
"endTime": 2018-04-11 09:15:00.000 }
];