I can't find a way to update an item of my item array.
What I want to do is to remove an item before pushing it into the list if this item already exists. What I don't want to do is to iterate through all items to find witch one i have to delete, if there is one.
I tryied to use a watcher :
watch: {
list: function (list, oldList) {
}
}
but since I get the old and new list, I still need to iterate.
Checking the documentation I found a $remove method that :
will search for that value in the array and remove the first occurrence.
So I tryied this.list.$remove(item.Id) but it doesn't work.
I tryied to use JQuery.grep() to select the right item but it needs to iterate so, that's a no.
Is there any way in vue.js to perform what I am trying to do ?
EDIT
I can select the right item to delete with the $eval method :
var expr = "list | filterBy " + value.Id + " in 'Id'";
var item = this.$eval(expr);
this.list.$remove(item);
But now that I have my item, the $remove method seems to not do it's job. Am I using it wrong or something ?
Isn't this.list.$remove(item) enough? Vue will search array for you and remove proper item. Actually that is exactly what you are doing with $eval method.
Related
I am functional component I am using hooks to update the state of the array locationData
const c = {
title: inputValue,
}
setLocationData([...locationData, c]);
This is working fine, but now I want to add the value at the beginning of the array, and not at the end.
Edit:
I also have a problem to delete an item from the array. I want to delete one item, but more are deleted
const deleteItem = (index) => {
console.log(index)
var temp = locationData;
var temp = locationData.splice(index, 1);
setLocationData(temp);
}
You are almost there, just switch the position in the array.
setLocationData([c, ...locationData]);
You should also be aware of other methods like splice, slice, push, pop etc...
Update: Using Splice
This relates to part 2 of your question with regards to removing from specific index.
The splice() method changes the contents of an array by removing or
replacing existing elements and/or adding new elements in place. To
access part of an array without modifying it, see slice().
So your codes should be similar to the following
var temp = [...locationData];
temp.splice(index, 1);
setLocationData(temp);
Currently I display a list of hotels for each city in a Vue.js / Buefy form using:
<option
:value="h['#attributes'].Name"
v-for="h in cities[form.cities[i].index].Hotels.Hotel"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['#attributes'].Name"></option>
What should I add to sort them alphabetically? I'm at loss, as I don't know Vue / Buefy so well and I'm modifying a code somebody else wrote.
Thanks!
It is important to understand what your code is doing so that you know where you need to make changes.
Your loop v-for is iterating over your array cities[form.cities[i].index].Hotels.Hotel (the naming seems odd to me).
Within this array, there is a key #attributes which holds an object with a key Name, which is probably what you want to use for sorting.
Normally I would go with computed properties for these things but since you have the array based on a parameter (form.cities[i].index) I am not sure that would work so easily. So instead you can use a method to get a sorted version of your array. In your Vue instance, add the following to the "methods" property:
methods: {
sortedHotels: function(hotels) {
tmp = this.hotels.slice(0);
tmp.sort(function(a,b) {
return (a['#attributes'].Name > b['#attributes'].Name) ? 1 : ((b['#attributes'].Name> a['#attributes'].Name) ? -1 : 0);
});
return tmp;
},
},
Then, instead of looping through the normal array, you loop through the result of the function call of that array:
<option
:value="h['#attributes'].Name"
v-for="h in sortedHotels(cities[form.cities[i].index].Hotels.Hotel)"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['#attributes'].Name"></option>
I have two components inside a parent, one component shows me a list, and I want the other component to show me the details of an item of the list. I'm using the List of this demo https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages
since I have these two components
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
I would like to pass the Id of an item clicked on list-view to the full-view. So what would be the best way to execute an event on "full-view" when an item of "list-view" is clicked? I need to pass information from list-view to full-view.
Thank you.
What about of databinding? #SG_ answer is ok, but it can does using simple databinding, as follows:
<list-view data="[[fileData]]" on-item-click="_onItemClick" selected-id="{{idSelected}}"></list-view>
<full-view on-close="_onClose" selected-id="{{idSelected}}"></full-view>
Each element models should have a property "Selected ID", to make it possible to perform databinding. In <full-view> you must need to add a property as follows:
selectedId:{type:String, observer:"selectedIdChanged"}
So, when selectedId changes in <list-view> will also change in <full-view>
Now, you only need to add a new function in <full-view> to do something with this changed selectedId
selectedIdChanged: function(newValue, oldValue){
if(newValue!= undefined && newValue!=null){
//do something with selected Id
}
},
You could give an id for both list-view and full-view, then define & set data attribute/property for <full-view> from the _onItemClick.
<list-view id='l_view' data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view id="f_view" data="{}" on-close="_onClose"></full-view>
And in the script of parent.
_onItemClick: function() {
this.$.f_view.data = this.$.l_view.selected;//or any attribute of the selected item
this.$.pages.selected = 1;
},
I have following code.
var list = this.getNavigation();
if (list.itemsCount > 0) {
list.removeAll(true, true);
}
list.setData(filtered);
List = xtype: list.
So idea is next i have menu and some times i need to rebuild it. as you see i am not using store because i need to filter array and set it.
When i call removeAll i got error
Uncaught TypeError: Cannot call method 'getScroller' of undefined
And i cant find method to cleanup it...
I rewrote my menu to use store and instead of setData on list i am setting data on store and it works as expected
Another option would be calling removeAll with destroy set to false like so:
var list = this.getNavigation();
if (list.itemsCount > 0) { list.removeAll(false); }
list.setData(filtered);
The list DOM items get deleted anyways by some sort of auto-cleanup.
Is there any way to find an "item" inside an Dojo Store (Version 1.1!!).
The Format of the Json Data is like: name/id.
So far if tryed it with:
var storeItem = this.myFilteringSelect.store.fetch({query: {name: "Alpha"}});
But fetch does not return the item? Btw. i need the "ID" of the Item to set an default value for the filteringSelect (but the id can change from time to time...)
Let me preface my answer in that I can't speak to 1.1 specifically. But in 1.6...
store.fetch is coded in an asynchronous manner. It does not return the item. You must provide a callback that will iterate over the items returned from the query.
store.fetch({
query: {/*queryParams*/},
onComplete: function(items, findResult){
dojo.forEach(items, function(item){
// work with your item
}
}
});
https://dojotoolkit.org/reference-guide/1.6/dojo/data/api/Read.html#dojo-data-api-read
I don't believe this API had changed much over time, so if it is present in 1.1, then I think this should help.