My table data has nested objects, so I need to use a v-slot to render it correctly on a table. The thing is that the table columns depend on the lenght of another array.
I tried using a v-for outside my v-slot, but then I get an error telling me that the v-slots need to be directly under the root level inside its component.
<div v-for="plant in stockTable.plants" :key="plant.key">
<template v-slot:cell(plant.name)="row">
</template>
</div>
My data looks like this:
{ key: 1, description: 'Stock-1', plants: [{ key: 1, name: 'Plant-1', inventory: [{ type: 'Physical', stock: 875 }, { type: 'Virtual', stock: 1540 }] }, { key: 2, name: 'Plant-2', inventory: [{ type: 'Physical', stock: 458 }, { type: 'Virtual', stock: 525 }] }] }
And the array it depends on it this one:
plants: [{ key: 1, name: 'Plant-1' }, { key: 2, name: 'Plant-2' }]
It has to create columns with the second array, and show the corresponding data of the first one.
Edit: This is a mock up of what I'm trying to do
Found another similar question wich was correctly answered. For what I understand, the issue had to do with some string interpolation.
Here's the answer:
https://stackoverflow.com/a/58143362/11932235
Related
I have an array with some data objects that were created on various dates. I would like to only display the objects that were created within the last 24 hours.
I have tried to use moment for this, by using subtract on the date values, but it has no effect. Maybe someone here could come up with a suggestion.
Here are my computed properties. I use these because I am outputting the data in a bootstrap table, so the "key" represents the different values inside the object.
My table:
<b-card class="mt-4 mb-4">
<b-table
:items="tasks"
:fields="fields"
sort-desc
/>
</b-card>
My array (I am actually importing from a database, but for this question I will just write it manually) Please note I am just showing a single object here. In reality I have hundreds of objects
data: {
tasks: [
{ message: 'Foo' },
{ creationDateTime: '03-02-2022' },
{ isRead: false }
]
}
In my computed properties I then pass them to the table
computed: {
fields() {
return [
key: 'message',
label: 'message'),
sortable: true,
},
{
key: 'creationDateTime',
label: 'Date created',
formatter: date => moment(date).subtract(24, 'hours').locale(this.$i18n.locale).format('L'),
sortable: true,
},
{
key: 'isRead',
label: 'Has been read'),
sortable: true,
}
]
},
},
As I said, using subtract does not work. It still shows all objects in my database
I tried doing the reduction on the whole array as well, but I just get the error:
"TypeError: this.list.filter is not a function"
newTasks(){
if(this.tasks){
return moment(this.tasks.filter(task => !task.done)).subtract(24, 'hours')
}
}
I'm out of ideas.
In Moment, you can check if a date is within the last 24 hours with:
moment().diff(yourDate, 'hours') < 24
(note that future dates will also pass this check, but you can easily adjust it).
You can put this into your computed property:
newTasks(){
if(!this.tasks){
return []
}
return this.tasks.filter(task => !task.done && moment().diff(task.creationDateTime, 'hours') < 24)
}
And that's it, now newTasks should contain all tasks from the last 24 hours that are not done.
I am having trouble sorting a data table on entry. My code:
$('#CommentsOnAuthors').DataTable({
ajax: {
url: '/authors_comments',
data: {
author_id: "#{author_id}",
book_id: "#{book_id}"
}
},
columns: [
{title: 'Date', data: 'created_at', type: 'date'},
{title: 'Book', data: 'book'},
{title: 'Author', data: 'author'},
{title: 'Comment', data: 'comment'}
],
order: [[1, 'desc']]
});
However, when the page loads, the second column (Book) is sorted in ascending order (and the down arrow for that column is bolded), not the first. If I click on the arrow of the first column (Date), it sorts it properly. I believe I am following the documentation. I would like the table to load, sorted by Date, in descending order. Any ideas?
The columns are zero-based, like arrays. So if you want to sort by the date you need to do
order: [[0, 'desc']]
I resolve most of my problem only few left out of which this one is preventing me to submit the form. I am using Nativescript + vue and without Typescript. how to display the Valueproviders with array list? Here is the code
https://play.nativescript.org/?template=play-vue&id=2oWObE
There was the problem with your data type. As per the documentation Array should have key and label properties. But still if you want id and name then you should try like below.
'valuesProvider': {
key: 'id',
label: 'name',
items: [
{ id: 1121, name: 'Shanghai' },
{ id: 3651, name: 'Lagos' },
{ id: 5213, name: 'Moscow' },
{ id: 6214, name: 'São Paulo' },
{ id: 6985, name: 'Sydney' }
]
};
https://docs.nativescript.org/vuejs/ns-ui/DataForm/dataform-editors-providers
Anyway, I tried that and that was not working for me either then searched for it and relaised that there is an open feature request to support the valuesProvider for picker from JSON metadata. You can vote to support the same feature.
https://github.com/NativeScript/nativescript-ui-feedback/issues/369
Solution
Just get you cityList out of vue data and map your data
https://play.nativescript.org/?template=play-vue&id=2oWObE&v=6
more detailed version with groups
https://play.nativescript.org/?template=play-vue&id=rqK7wO&v=3
I am working with LazyTreeGridStoreModel .
And need to form a json datastructure with child parent relationship that can support LazyTreeGridStoreModel.
I saw the sample given in the dojo site but couldn't find the relationship between parent child.The below sample provided on dojo site.
data = {
identifier: 'id',
label: 'name',
items: [
{id: 'AF', name:'Africa', children: true},
{id: 'EG', name:'Egypt' , children: false},
{id: 'KE', name:'Kenya',
children:[
{id: 'Nairobi', name:'Nairobi', type:'city'},
{id: 'Mombasa', name:'Mombasa', type:'city'}
]
},
...
]
}
Where i can declare the children of
{id: 'AF', name:'Africa', children: true},
Abhisek
You will need to implement the mechanism in your JSON data and in your datastore.
Typically, an attribute is added to the JSON data to indicate the parent-id.
For example:
{id: 'EG', name:'Egypt' , children: false, '$ref': 'AF'}
Here '$ref' is referring to the parent's id for this child.
The LazyTreeGridStoreModel will call store.fetch() with a query object {parentId: value} and you can extend your store (QRS for example) and implement isItemLoaded(), loadItem(), and getValues() to return the children items appropriate for your data
The following URL has a nice example on how to implement this with queryreadstore:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html
Also see:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model_lazy.html
View the source to see how the children in the JSON data are using a "$ref" attribute to indicate their parent
I am running into a strange error while adding a new Tree node to dijit.Tree.
var rawdata = [{
label: 'Date',
id: '1',
children: [{
label: 'Life',
id: '1.1'
}, {
label: 'Liberty',
id: '1.2'
}]
}, {
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
}, {
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
}, {
id: '2.3',
label: 'my blog'
}]
}];
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
And in order to add item to the tree, I am using the following:
store.newItem({id:'3', label:"New tree node label"});
However, this only seems to work for the first time I add an item to the tree. When trying to add a second item, I get an Error: assertion failed in ItemFileWriteStore ?
Also, currently the node is added at the very first level in the tree. How could I add it in one of the subtree, say the second tree with id:2 ?
Thanks!
The assertion error may be due to having conflicting id values. Is the second item added with a different id than the first?
If you add an item to the store it will be added at top level, unless you add the item to one of the children arrays - the tree has to know where to put the item, if you add it to a store it assumes (correctly) that it is a top level item. If you add the new item as a child of an existing item, then again, the tree knows where it should go.