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>
Related
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.
I need to do multi-category filtering with vuejs 2. I struggled a bit for this but the filtering process is not working.
I know how to do filtering operations with the computed method.
When I try this, I can only list the data for a single category.If I choose another category, the data comes out empty.I do not understand where I am making mistakes?
My Example : https://jsfiddle.net/a3x374qy/9/
new Vue({
el: '#app',
data: {
checkedEatCategories:[],
eatCategories : [
{
id:1,
title: 'Category 1',
},{
id:2,
title: 'Category 2',
},{
id:3,
title: 'Category 3',
},{
id:4,
title: 'Category 4',
},{
id:5,
title: 'Category 5',
}
],
posts: [
{
id:1,
title:'Product 1',
eat_categories: [
{
id:1,
}
]
},
{
id:2,
title:'Product 2',
eat_categories: [
{
id:1,
},
{
id:2,
},
{
id:3,
}
]
},
{
id:3,
title:'Product 3',
eat_categories: [
{
id:1,
},
{
id:5,
}
]
}
]
},
computed: {
filteredPlaces: function () {
return this.posts.filter((j) => {
return (j.eat_categories.includes(this.checkedEatCategories));
});
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="eatCategory in eatCategories">
<label>
<input type="checkbox" :value="eatCategory.id" v-model="checkedEatCategories">
<span class="title">{{eatCategory.title}}</span>
</label>
</li>
</ul>
<ul>
<li v-for="post in posts">
{{ post.title }}
</li>
</ul>
</div>
A couple of issues here.
You're looping through posts instead of filteredPlaces in your template
.includes() doesn't accept an array. Try combining it with .some()
new Vue({
el: '#app',
data: {
checkedEatCategories: [],
eatCategories: [{
id: 1,
title: 'Category 1',
}, {
id: 2,
title: 'Category 2',
}, {
id: 3,
title: 'Category 3',
}, {
id: 4,
title: 'Category 4',
}, {
id: 5,
title: 'Category 5',
}],
posts: [{
id: 1,
title: 'Product 1',
eat_categories: [{
id: 1,
}]
},
{
id: 2,
title: 'Product 2',
eat_categories: [{
id: 1,
},
{
id: 2,
},
{
id: 3,
}
]
},
{
id: 3,
title: 'Product 3',
eat_categories: [{
id: 1,
},
{
id: 5,
}
]
}
]
},
computed: {
filteredPlaces: function() {
return this.posts.filter(post =>
post.eat_categories.some(tag =>
this.checkedEatCategories.includes(tag.id)
)
)
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="eatCategory in eatCategories">
<label>
<input type="checkbox" :value="eatCategory.id" v-model="checkedEatCategories">
<span class="title">{{eatCategory.title}}</span>
</label>
</li>
</ul>
<ul>
<li v-for="post in filteredPlaces">
{{ post.title }}
</li>
</ul>
</div>
I am unable to get index value form the dataview:
{
xtype: 'list',
itemId: 'catList',
store: 'CategoryStore',
scrollable: false,
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'<tpl for="data">',
'<span >{category_name}</span> ',
'</tpl>',
'</div>'],
listeners: {
'itemtap': function(list, index, target, record, e, eOpts){
console.log(record.get('cat_id'));
}
}
}
Edited:
If i put data static on store it works fine but it does not work while getting data from server:
it works like as displayed on list:
{
xtype: 'list',
itemId: 'catList',
scrollable: false,
data: [
{ category_name: 'A', cat_id: 1},
{ category_name: 'B', cat_id: 2},
{ category_name: 'C', cat_id: 3},
{ category_name: 'D', cat_id: 4},
{ category_name: 'E', cat_id: 5},
],
loadingText: "Loading Words...",
emptyText: '<div>{message}</div>',
autoLoad:true,
itemTpl:[
'<tpl for=".">',
'<span >{category_name}</span> ',
'</tpl>',
]
},
Here, I tap many times on different row but only gets index 0, why is this? why am i not getting different index value while tapping different row of list item;
My JSON
I tried and working perfectly for me, Let me share what i did.
Model
Ext.define('Myapp.model.Category', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'cat_id', type: 'integer' },
{ name: 'category_name', type: 'string' },
{ name: 'created_date', type: 'string' },
{ name: 'order', type: 'integer' },
{ name: 'status', type: 'integer' },
{ name: 'deleted', type: 'integer' },
{ name: 'type', type: 'integer' }
]
}
});
Store
Ext.define('Myapp.store.Category', {
extend: 'Ext.data.Store',
requires: [
'Myapp.model.Category'
],
config: {
storeId: 'category',
model: "Myapp.model.Category",
proxy: {
type: "ajax",
url : "http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1376475408437&page=1&start=0&limit=25",
reader: {
type: "json",
rootProperty: "data"
}
},
autoLoad: true
}
});
List
{
xtype: 'list',
itemId: 'catList',
store: Ext.create('Myapp.store.Category'),
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'{category_name}',
'</div>'],
listeners: {
itemtap: function(list, index, target, record, e, eOpts){
console.log(record.get('cat_id'));
}
}
}
Output
As you can see itemtap function also printing correct cat_id
UPDATE
Based on your comment
{
xtype :'panel',
items : [{
xtype : 'toolbar',
itemId: 'categoryName' // Give itemId
},
{
xtype: 'list',
itemId: 'catList',
height : '100%',
store: Ext.create('GoodNews.store.Category'),
layout: 'fit',
itemHeight: 20,
itemTpl: [
'<div>',
'{category_name}',
'</div>'],
listeners: {
itemtap: function(list, index, target, record, e, eOpts){
var catId = record.get('cat_id');
var categoryName = record.get('category_name');
// Set the title like this
this.getParent().getComponent('categoryName').setTitle(categoryName);
}
}
}]
}
I don't really know what's wrong with your code as I tested it and it worked fine. However, a few things are wrong.
You do not need the for loop in your itemTpl as "itemTpl" is already
iterating in you data array for you. You would need it if you were
using just "tpl".
Avoid to have your listeners in your view. Instead,
get a reference to your list in your controller, and set the
listeners there. This is bad practise and it breaks the NVC pattern.
Here is a small version that works on my te4st application:
{
xtype: 'list',
itemId: 'catList',
scrollable: false,
data: [
{ category_name: 'A', cat_id: 1},
{ category_name: 'B', cat_id: 2},
{ category_name: 'C', cat_id: 3},
{ category_name: 'D', cat_id: 4},
{ category_name: 'E', cat_id: 5},
],
loadingText: "Loading Words...",
emptyText: '<div>{message}</div>',
autoLoad:true,
itemTpl: '{category_name}',
listeners: {
'itemtap': function(list, index, target, record, e, eOpts){
//TODO: whatever..
}
}
}
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
I have problem rendering Line Chart in EXTJS 4. I have Viewport that contain accordion Layout. In that layout, I create very simple Chart.
Here is my code:
var chartBox = Ext.create('Ext.chart.Chart', {
width: 500,
height: 300,
style: 'background:#fff',
animate: true,
store: Ext.data.Store({
fields: ['active'],
data: [
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Feb 2011', 'active': 9},
{ 'name': 'Mar 2011', 'active': 13},
{ 'name': 'Apr 2011', 'active': 5},
{ 'name': 'Mei 2011', 'active': 17},
]
}),
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['active'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Total',
grid: true,
minimum: 0
},{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month and Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'active',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
})
Then, it is work. See this screenshot.
But after I change this part of code:
store: Ext.data.Store({
fields: ['active'],
data: [
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Jan 2011', 'active': 10},
]
}),
with this:
store: Ext.data.Store({
fields: ['active'],
autoLoad: true,
proxy: {
type: 'ajax',
url : 'data/statexample_noroot.json',
reader: {
type: 'json'
}
}
}),
to load data from Server, it is not work. See this screenshot.
This is the content from "statexample_noroot.json" :
[
{ 'name': 'Jan 2011', 'active': 10},
{ 'name': 'Feb 2011', 'active': 9},
{ 'name': 'Mar 2011', 'active': 13},
{ 'name': 'Apr 2011', 'active': 5},
{ 'name': 'Mei 2011', 'active': 17},
]
I only get false rendering Line Chart with warning "Unexpected value NaN parsing x attribute.", "Unexpected value NaN parsing width attribute.", "Unexpected value matrix(NaN,0,NaN,1,NaN,0) parsing transform attribute." etc....
I have set axes with Numeric. I try everything include using Ext.data.Model, Ext.data.JsonStore, but still didn't work.
What is the difference?? What I am missing here? Anyone know why this thing happen? I am stuck for plenty of hours.
you forgot the other field "name"
fields: ['active'], => fields: ['active','name'],