Hi, I can't add my images on my view by from a array
I use Vue.JS on Laravel project !
I use spell my component and data function:
const routes = [
{
path: '/',
component: Home,
data: () => {
return {
products
}
}
} ];
my array "product":
const products = [
{
id: 1,
description: 'Montre Tissot noire',
price: 12,
img: './resources/img/tissot-noire.jpg'
},
{
id: 2,
description: 'Montre Samor noire',
price: 16,
img: './resources/img/samor.jpg'
}];
on my HomeComponent.vue:
<div v-for="product in products">
<img v-bind:src="product.img" v-bind:alt="product.description">
</div>
Related
I have here sample families data which has nested children. My problem is I don't know how many x-for should I write since the nested is dynamic (from Database). Would appreciate any answer.
Here's my sample data in the snippet below:
$families = [
{
id: 1,
name: 'Lupe',
children: [
{
id: 3,
name: 'Bertha',
children: [
{
id: 5,
name: 'Hollywood',
children: [
{
id: 6,
root: 5,
children: [],
},
]
},
],
},
{
id: 9,
name: 'Pinnick',
children: [
{
id: 10,
name: 'Andy',
children: []
},
]
},
]
},
{
id: 2,
name: 'Smitty',
child: [
{
id: 4,
name: 'Vito',
children: []
},
],
}
];
Here is the expected output
Draft implementation:
<tbody>
<template x-for="(family, familyKey) in families">
<template x-for="(parent, parentIndex) in family">
<tr :class="rowClass(scenarioKey, itemIndex)">
<h1 x-text="parent.name"></h1>
</tr>
</template>
</template>
</tbody>
You need a recursive rendering function using x-html directive so make sure that the content is safe, otherwise you can put XSS vulnerabilities in your code. Based on this we can write a recursive list generation function that follows the family graph and renders each level:
<div x-data="familyTree">
<ul>
<template x-for="(level, i) in families">
<li x-html="renderLevel(level, i)"></li>
</template>
</ul>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('familyTree', () => ({
families: [
{
id: 1,
name: 'Lupe',
children: [
{
id: 3,
name: 'Bertha',
children: [
{
id: 5,
name: 'Hollywood',
},
],
},
{
id: 9,
name: 'Pinnick',
children: [
{
id: 10,
name: 'Andy',
children: []
},
]
},
]
},
{
id: 2,
name: 'Smitty',
children: [
{
id: 4,
name: 'Vito',
children: []
},
],
}
],
renderLevel(obj, i) {
let has_children = obj.children && obj.children.length
let html = `<span style="padding-left: 10px;"
x-html="'${has_children ? '> ' : '- '}' + level.name"></span>`;
if (obj.children) {
html += `<ul style="padding-left: 10px; padding-bottom: 10px;">
<template x-for='(level,i) in level.children'>
<li x-html="renderLevel(level,i)"></li>
</template>
</ul>`;
}
return html;
},
}))
})
</script>
Output:
> Lupe
> Bertha
- Hollywood
> Pinnick
- Andy
> Smitty
- Vito
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
I am trying to show data in vue table using api in api url. Basically I am doing a post request in created method that is sending an id to the server and the server is returning data associated with the id. And simply I am using the api that is returning data. Every thing looks okay but data is not showing in vue table.
vue table
`
<vuetable ref="vuetable"
api-url="http://127.0.0.1:8000/api/patient_previous_appointments"
:fields="fields"
pagination-path=""
:per-page="5"
:multi-sort="true"
:sort-order="sortOrder"
:append-params="moreParams"
:data = "data"
#vuetable:pagination-data="onPaginationData"
>
`
data property
`
data () {
return {
data: [],
fields: FieldsDef_previous_appointment,
sortOrder: [],
moreParams: {}
}
}
`
Fields
`
export const FieldsDef_previous_appointment = [
{
name:'date',
title: 'Date',
sortField: 'date',
titleClass: 'center aligned',
dataClass: 'center aligned',
},
{
name:'doctor',
title: '<i class="fa fa-tag"></i> Doctor',
sortField: 'doctor'
},
{
name:'appointed_by',
title: '<i class="fa fa-tag"></i> Appointed By',
sortField: 'appointed_by'
},
{
name: '__slot:actions',
title: 'Actions',
dataClass: 'center aligned'
}
]
`
Created
`
created () {
const tokenData = JSON.parse(window.localStorage.getItem('authUser'))
var pt_id = tokenData.patient_id
this.$http.get(apiDomain + 'api/patient_previous_appointments',
{patientID:
pt_id})
.then(response => {
console.log(response)
}).catch((e) => {
console.log(e)
})
}
`
response
enter image description here
I have two TreeViews, one has a list of countries, and the other is empty, now I want drag and drop selected countries into the second tree-view. I don't know how to send data to the controller from the TreeView and there is also some text field on the page in a form. So, how can I send both the form data and the TreeView's data to the controller.
Here is the code for the second tree-view which is empty and I want to add the selected nodes to:
#(Html.Kendo().TreeView()
.Name("treeview-right")
.DragAndDrop(true)
.Events(events => events
.Drag("onDrag")
.Drop("onDrop")
)
)
Please try with the below code snippet.
HTML/VIEW
<div style="border: 1px solid green;">
<div id="treeview-left"></div>
</div>
<div style="border: 1px solid red;">
<div id="treeview-right"></div>
</div>
<div id="mydiv" onclick="SaveData()">Click me to save data</div>
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 11, text: "Furniture", expanded: true, items: [
{ id: 12, text: "Tables & Chairs" },
{ id: 13, text: "Sofas" },
{ id: 14, text: "Occasional Furniture" }
]
},
{
id: 15, text: "Decor", items: [
{ id: 16, text: "Bed Linen" },
{ id: 17, text: "Curtains & Blinds" },
{ id: 18, text: "Carpets" }
]
}
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 1, text: "Storage", expanded: true, items: [
{ id: 2, text: "Wall Shelving" },
{ id: 3, text: "Floor Shelving" },
{ id: 4, text: "Kids Storage" }
]
},
{
id: 5, text: "Lights", items: [
{ id: 6, text: "Ceiling" },
{ id: 7, text: "Table" },
{ id: 8, text: "Floor" }
]
}
]
});
var selectedID;
function SaveData() {
selectedID = '';
var tv = $("#treeview-right").data("kendoTreeView");
selectedID = getRecursiveNodeText(tv.dataSource.view());
alert(selectedID);
var data = {};
data.str = selectedID;
$.ajax({
url: 'Home/SaveData',
type: 'POST',
data: data,
dataType: 'json',
success: function (result) {
alert("Success");
},
error: function (result) {
alert("Error");
},
});
}
function getRecursiveNodeText(nodeview) {
for (var i = 0; i < nodeview.length; i++) {
selectedID += nodeview[i].id + ",";
//nodeview[i].text; You can also access text here
if (nodeview[i].hasChildren) {
getRecursiveNodeText(nodeview[i].children.view());
}
}
return selectedID;
}
</script>
CONTROLLER
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
[HttpPost]
public JsonResult SaveData(string str)
{
foreach (string s in str.Split(','))
{
if (!string.IsNullOrEmpty(s))
{
//Perform your opeartion here
}
}
return Json("");
}
}
}
jsfiddle Demo
Is it possible to add graphs using the Google Chart API or any other graph to one column of jqGrid? If it is possible, how? I need to filter each row of jqGrid and show a graph of that particular row in the last column of jqGrid.
You could use a custom formatter:
<script type="text/javascript">
$(function () {
$('#myGrid').jqGrid({
url: '#Url.Action("Data")',
datatype: 'json',
colNames: [ 'Foo', 'Bar', 'Chart' ],
colModel: [
{ name: 'foo', index: 'foo' },
{ name: 'bar', index: 'bar' },
{ name: 'chart', index: 'chart', formatter: chartFormatter },
]
});
});
function chartFormatter(el, cval, opts) {
return '<img src="' + el + '" alt="chart" title="" />';
}
</script>
<div style="height: 500px;">
<table id="myGrid"></table>
</div>
and your controller would return the corresponding Google Chart URLs:
public ActionResult Data()
{
return Json(new
{
rows = new[]
{
new { id = 1, cell = new[] { "foo 1", "bar 1", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
new { id = 2, cell = new[] { "foo 2", "bar 2", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
}
}, JsonRequestBehavior.AllowGet);
}
which gives: