I am using this to implement drag-drop in my vue app. Lets my array is:
lists: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
I want to get the element object from the list after finishing the drop event. For example, I am moving the Item 1 item. After finishing the drag-drop, I want to get the print of which item has been moved. So, I want to get the output:
{ id: 1, name: 'Item 1' }
To get that, I have used #end:
<draggable
class="list-group"
ghost-class="moving-card"
:list="lists"
group="my-group"
#end="finish($event, lists)"
>
And at finish function, I would like to get the desired output: { id: 1, name: 'Item 1' } from my <v-list v-for="list in lists"></v-list>. So, what to do at this function?
finish (evt, draggedList) {
// console.log('finished')
// desired output (if item 1 has been moved):
// { id: 1, name: 'Item 1' }
}
Codepen Demo
Use #change="finish" then change your method:
finish (item) {
console.log(item.moved.element) // { id: 1, name: 'Item 1' }
}
RTM: https://github.com/SortableJS/Vue.Draggable#events part which mentions change event.
Related
I have a table with parameters as shown below.
{
id: 1,
title: 'waccos',
description: 'Making an operating system in wacc',
est_duration: 420,
exp_req: 'any',
langs: [ 1 ],
owner: 1,
members: [ 1, 2 ]
},
I want to use SQL to add a new member into the member list, but I do not know how to. The table is called testprojects. I've tried using
(update testprojects
set members = members || $1
where title is $2;', [name, title])
but I think that is wrong. Could anyone help me please?
This is the table of members so far.
[
{ id: 1, name: 'A' },
{ id: 2, name: 'K' },
{ id: 3, name: 'S' },
{ id: 5, name: 'd' },
{ id: 6, name: 'J' },
{ id: 7, name: 'E' },
{ id: 8, name: 'a' }
]
I faced with this challenge to assign array to another array such that the arrays won't be reactive on changes from one of the array.
So to achieve this I made a local copy of the same array and assigned one to another but I would love to do stuffs dynamically where I am having the reactive issues.
Below is what am trying to achieve
const ComponentA = {
data: function() {
return {
categories:[
{
name: 'Category 1',
series: [
{
name: 'Series 1',
value: 5
},
{
name: 'Series 2',
value: 5
}
]
},
{
name: 'Category 2',
series: [
{
name: 'Series 1',
value: 50
},
{
name: 'Series 2',
value: 56
}
]
}
],
tempCategories:[
{
name: 'Category 1',
series: [
{
name: 'Series 1',
value: 5
},
{
name: 'Series 2',
value: 5
}
]
},
{
name: 'Category 2',
series: [
{
name: 'Series 1',
value: 50
},
{
name: 'Series 2',
value: 56
}
]
}
]
}
},
methods: {
resetCategory() {
this.tempCategories.forEach((category,i)=>{
category.series.forEach((series,j)=>{
this.categories[i].series[j] = series;
});
});
}
}
}
after computations on categories i can reset the categories array with tempCategories by calling
this.resetCategory() and it works as expected.
Meanwhile I want to be able to do this assignment dynamically whereby when i have copy of the category array I can assign the array to both categories and tempCategories arrays, respectively and after computations with categories array i can reset the categories array with tempCategories array. So I did the following.
initialize(category) {
this.tempCategories = category;
this.categories = category;
}
I realize changes in this.categories reflects on this.tempCategories; I've even used the following options
initialize(category) {
this.tempCategories = category.slice();
//or this.tempCategories = Json.parse(Json.stringify(category));
this.categories = category.slice();
//or this.categories = Json.parse(Json.stringify(category));
}
yet the two arrays are still reactive. Please I need help on how to solve this problem.
Thanks guys, it works now both method
initialize(categories){
//let copy = _.cloneDeep(categories);
let copy = JSON.parse(JSON.stringify(categories));
this.tempCategories = copy;
this.categories = copy;
},
resetCategories(){
//this.categories = _.cloneDeep(this.tempCategories);
this.categories = JSON.parse(JSON.stringify(this.tempCategories));
},
There's no such Json. but It may be JSON.
initialize(category) {
this.tempCategories = JSON.parse(JSON.stringify(category));
this.categories = JSON.parse(JSON.stringify(category));
}
And you can't prevent fake copy of by
this.tempCategories = category;
this.categories = category;
May be those three Arrays are exactly same even one of them is updated.
I have list of data that want to show using FlatList , as all examples I have seen like this from reactnativeexpress.com :
const sections = [
{
id: 0,
title: 'Basic Components',
data: [
{id: 0, text: 'View'},
{id: 1, text: 'Text'},
{id: 2, text: 'Image'},
]
},
{
id: 1,
title: 'List Components',
data: [
{id: 3, text: 'ScrollView'},
{id: 4, text: 'ListView'},
]
}
]
Items should be a list named data but if I get data from an API that items list is not named data, and it will not show the content. ( I tested with this example and if change data to dat items will not shown) , is there any way to change data default name or not?
I finally realized that item list should be named data so I added a pointer to my list :
content.payload.APIList.map((eachcat) => eachcat.data = eachcat.APISubList)
I am having a list which has table in a itemtpl
{
xtype: 'list',
deferEmptyText: false,
height:140,
store:'Store',
scrollable:false,
itemTpl:'<table><tr><td><b>{A}</b></td></tr><tr><td>{B} </td></tr><tr><td>{C}</td><td>{value}</td></tr></table>'
}
The data in my store is
{ A:'Name1',
B:'Name2',
C:'Name3',
value:0
}
I want the data to be displayed as
Name1 0
Name2 0
Name3 0
How should I arrange the data in my store so that it can be shown in the above mentioned format.Right now the td tag is not functioning as expected.
At first go here and see how itemTpl is used. And regarding your query, you try this snippet:
{
xtype: 'list',
itemTpl: '{title} {value}',
data: [
{
title: 'Name1',
value: 0
},
{
title: 'Name2',
value: 0
},
{
title: 'Name3',
value: 0
},
{
title: 'Name4',
value: 0
}
]
}
By this you will get your desired format of data. Here data is nothing but the store. So in your store data should be like this.
my application receives data from the database.
The "Recipes" contains Ext.NestedList.
http://www.senchafiddle.com/#VovtL#o7GJJ
I need to display a list inside detailed card:
http://www.senchafiddle.com/#4hKD8#uZlr7
The values in the list should be taken from the base and dependent upon the key values in nestedlist.
I looked Kitchen Sink Example, but there is little that I could understand. Is it possible to implement? or better to replace nestedlist with set of buttons?
I'll be glad to get any idea.
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.removeAll(true, false);
detailCard.setHtml('');
detailCard.setLayout('fit');
var urList = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
detailCard.add(urList);
}
the code is quite self explainatory. you just have to replace urList with your list. and change the store..
if any problem let me know