I'm new in Vuejs, please help me - How to add new value into itemList array
new Vue({
el: "#app",
data: {
rows: [],
itemList: [
{ code: 'Select an Item', description: '', unitprice: ''},
{ code: 'One', description: 'Item A', unitprice: '10'},
{ code: 'Two', description: 'Item B', unitprice: '22'},
{ code: 'Three', description: 'Item C', unitprice: '56'}
]
}
});
new Vue({
el: "#app",
data: {
rows: [],
itemList: [
{ code: 'Select an Item', description: '', unitprice: ''},
{ code: 'One', description: 'Item A', unitprice: '10'},
{ code: 'Two', description: 'Item B', unitprice: '22'},
{ code: 'Three', description: 'Item C', unitprice: '56'}
]
},
methods:{
addItem(){
this.itemList.push({code:'Four',description:'Item D',unitprice:'0'});
}
}
});
You can call addItem, in template or javascript.
Related
I am trying to show metabolite-protein interaction using cytoscape.min.js. I am using the circle layout to view the network.
I have two types of node in the network,"prot" and "met". For the better visualization, I want to create a circular layout with the node "met" at the center. In this case, I want to keep the metabolite (here node 'a') at the center of the circle. How to do the same ?
Thanks,
Santosh
My script for cytoscape.min.js is as follows:
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a', type: "met" } },
{ data: { id: 'b', type: "prot" } },
{ data: { id: 'c', type: "prot" } },
{ data: { id: 'd', type: "prot" } },
{ data: { id: 'e', type: "prot" } },
{ data: { id: 'f', type: "prot" } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ae',
source: 'a',
target: 'e'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node[type="prot"]',
style: {
'shape': 'circle',
'background-color': 'red',
label: 'data(id)'
}
},
{
selector: 'node[type="met"]',
style: {
'shape': 'square',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle',
animate: true
}).run();
</script>
In a Vue JS app I'm working on the following structure is being passed into a component as a prop to create nav links:
const data = [
{
category: 'Part 1',
items: [
{
'title': 'plan A',
'etlJobRefresh': false,
'type': 'form'
},
{
'title': 'plan B',
'etlJobRefresh': true,
'type': 'form'
},
{
'title': 'plan C',
'type': 'form'
},
{
'title': 'plan D',
'type': 'query'
},
]
},
{
category: 'Part 2',
items: [
{
'title': 'plan A',
'type': 'form'
},
{
'title': 'plan B',
'type': 'query'
}
]
},
{
category: 'Part 3',
items: [
{
'title': 'plan A',
'etlJobRefresh': false,
'type': 'form'
}
]
}
];
The component contains an element that is to be displayed only if the data prop contains items that have 'eltJobRefresh': true && 'type': 'form' . How do I check the incoming data prop to see if that condition exists without using a third party library?
You can use computed property for filtering
Vue.component('my-component', {
template: `
<div>
<div v-for="element in computedData">{{element.title}}</div>
</div>
`,
props: ['data'],
computed: {
computedData: function() {
let list = [];
this.data.items.forEach(element => {
console.log(element.eltJobRefresh);
if (element.etlJobRefresh && element.type == 'form') {
list.push(element);
}
});
return list;
}
}
})
new Vue({
el: '#app',
data: {
data: [{
category: 'Part 1',
items: [{
'title': 'plan A',
'etlJobRefresh': false,
'type': 'form'
},
{
'title': 'plan B',
'etlJobRefresh': true,
'type': 'form'
},
{
'title': 'plan C',
'type': 'form'
},
{
'title': 'plan D',
'type': 'query'
},
]
},
{
category: 'Part 2',
items: [{
'title': 'plan A',
'type': 'form'
},
{
'title': 'plan B',
'type': 'query'
}
]
},
{
category: 'Part 3',
items: [{
'title': 'plan A',
'etlJobRefresh': false,
'type': 'form'
}]
}
],
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="app">
<my-component :data="data[0]"></my-component>
<my-component :data="data[1]"></my-component>
</div>
</body>
</html>
data: function(){
return {
items: [
{ id: '1', name: 'Item 1', bool: false},
{ id: '2', name: 'Item 2', bool: false},
{ id: '3', name: 'Item 3', bool: false},
{ id: '4', name: 'Item 4', bool: false}
],
checkedItems: [],
};
},
methods:
{
select: function(event, index) {
if (!this.items[index].bool) {
this.checkedItems.splice(index, 1);
} else {
this.checkedItems.push(this.items[index]);
}
}
}
When I click on the div it copies the items data into checkedItems and sets bool to true.
Is it possible to target the item id and remove that specific one from checkedItems as the current splice is removing the wrong item based off the index.
Why not use an object instead of an array, something like this:
data: function(){
return {
items: [
{ id: '1', name: 'Item 1', bool: false},
{ id: '2', name: 'Item 2', bool: false},
{ id: '3', name: 'Item 3', bool: false},
{ id: '4', name: 'Item 4', bool: false}
],
checkedItemsObj: {},
};
},
methods:
{
select: function(event, index) {
let item = this.items[index];
if (!item.bool) {
this.checkedItemsObj[item.id] = item
} else {
delete this.checkedItemsObj[item.id]
}
},
getCheckedItems: () => Object.values(data().checkedItemsObj)
}
Now to get the array of checked items anytime, you can call methods.getCheckedItems()
i have a json that i have to itterate in my jade :
[
{ RefSlipNo:
{ fieldlabel: 'RefSlipNo',
fieldname: 'RefSlipNo',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Ref Slip No',
order_no: '1',
formgroup: 'vehicleDetails',
can_delete: '0',
status: '1' },
BookNumber:
{ fieldlabel: 'BookNumber',
fieldname: 'BookNumber',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Book Number',
order_no: '2',
formgroup: 'vehicleDetails',
can_delete: '1',
status: '1' },
SlipDate:
{ fieldlabel: 'SlipDate',
fieldname: 'SlipDate',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Slip Date',
order_no: '3',
formgroup: 'invoice',
can_delete: '1',
status: '1' },
FillFuelDate:
{ fieldlabel: 'FillFuelDate',
fieldname: 'FillFuelDate',
fieldtype: 'text',
required: '1',
default_value: '',
placeholder: 'Fill Fuel Date',
order_no: '4',
formgroup: 'invoice',
can_delete: '1',
status: '1' }
]
i want to use fieldset and legend on the basis of formgroup like:
-------invoice--------------------|
FillFuelDate : |
SlipDate : |
----------------------------------|
-------vehicleDetails-------------|
RefSlipNo : |
BookNumber : |
----------------------------------|
But could not able to get logic. How to loop it in jade. I want to get all field list with invoice formgroup under one fieldset and all vehicledetails under 1 fieldset as shown above.
In your JavaScript, define a function like this, and pass it as a local to your pug template:
function groupByFormGroup(fields) {
const formGroups = [];
const formGroupsByName = {};
fields.forEach(field => {
if (!formGroupsByName[field.formGroup]) {
formGroupsByName[field.formGroup] = {name: field.formGroup, fields: []};
formGroups.push(formGroupsByName);
}
formGroupsByName[field.formGroup].push(field);
});
}
Then in the pug template, do something like:
each formGroup in groupByFormGroup(fields)
fieldset
legend= formGroup.name
each field in formGroup.fields
label= field.fieldLabel
input(type="text" name=field.fieldName)
I have Json data that has children elements. I need to bind the store to an editable grid and have the edits populated to the store.
The data tree does get populated into the ItemFileWriteStore. The datagrid displays only the parent data and none of the children data.
SAMPLE.TXT
{
"items": [
{
"profileId": "1",
"profileName": "ABC",
"profileType": "EmailProfile",
"profilePreferences": [
{
"profilePreferenceId": "1",
"displayText": "Bob",
"address": "primary#some.com"
},
{
"profilePreferenceId": "2",
"displayText": "Sally",
"address": "secondary#some.com"
},
{
"profilePreferenceId": "3",
"displayText": "Joe",
"address": "alternate#some.com"
}
]
}
]
}
javascript
var sampleLayout = [
[
{ field: 'profileName', name: 'profileName', width: '100px' },
{ field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
{ field: 'profilePreferences.address', name: 'address', width: '100px' }
]];
function populateGrid() {
var url = "sample.txt"; //Will be replaced with endpoint URL
dojo.xhrGet({
handleAs: 'json',
url: url,
error: function (e) {
alert("Error: " + e.message);
},
load: showJsonData
});
}
function showJsonData(response, ioArgs) {
var profileStore = new dojo.data.ItemFileWriteStore({
data: {
items: response.items
}
});
var sampleGrid = dijit.byId("sampleGrid");
sampleGrid.store = profileStore;
sampleGrid.startup();
}
you need to be using dojox.grid.TreeGrid or 'fake' the JSON to present every even row with a blank profileName. Two samples follows, one for TreeGrid another on DataGrid - not tested in working environment though.
Given Hierachial JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin',
profilePreferences: [
{ id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
{ id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
]
}, {
id: '2',
profileName: 'Visitor',
profilePreferences: [
{ id: '2_1', displayText: 'Foo', address: 'Texas' }
{ id: '2_2', displayText: 'Bar', address: 'Indiana' }
]
}]
}
TreeGrid Structure:
{
cells: [
[
{ field: "profileName", name: "profileName", width: "100px" },
{ field: "profilePreferences",
children: [
{ field: "displayText" name: "displayText", width: "100px" },
{ field: "address" name: "address", width: "100px" }
]
]
]
}
reference: dojo docs
Given flattened 'fake-children' JSON:
{
identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid
items: [{
id: '1',
profileName: 'Admin', preferenceText: '', preferenceAddr: ''
}, {
id: '2',
profileName: '', preferenceText: 'John', preferenceAddr: 'NY'
}, {
id: '3',
profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
}, {
id: '4', // Not with '.' dot seperator like so
profileName: '', preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
} ]
DataGrid structure:
[[
{'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
{'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
{'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]
reference dojo docs