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>
Related
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
I'm coding an app for managing shift work. The idea is pretty simple: the team is shared between groups. In those groups are specific shifts. I want to get something like that:
Group 1
- shift11
- shift12
- shift13
Group 2
- shift21
- shift22
- shift23
I already made a couple of tests, but nothing is really working as I would like it to: everything reactive, and dynamic.
I'm using vue.js, firestore (and vuefire between them).
I created a collection "shiftGroup" with documents (with auto IDs) having fields "name" and "order" (to rearrange the display order) and another collection "shift" with documents (still auto IDs) having fields "name", "order" (again to rearrange the display order, inside the group) and "group" (the ID of the corresponding shiftGroup.)
I had also tried with firestore.References of shifts in groups, that's when I was the closest to my goal, but then I was stuck when trying to sort shifts inside groups.
Anyway, with vuefire, I can easily bind shiftGroup like this:
{
data () {
return {
shiftGroup: [], // to initialize
}
},
firestore () {
return {
shiftGroup: db.collection('shiftGroup').orderBy('order'),
}
},
}
Then display the groups like this:
<ul>
<li v-for="(group, idx) in shiftGroup" :key="idx">{{group.name}}</li>
</ul>
So now time to add the shifts...
I thought I could get a reactive array of shifts for each of the groups, like that:
{
db.collection('shift').where('group', '==', group.id).orderBy('order').onSnapshot((querySnapshot) => {
this.shiftCollections[group.id] = [];
querySnapshot.forEach((doc) => {
this.shiftCollections[group.id].push(doc.data());
});
});
}
then I'd call the proper list like this:
<ul>
<li v-for="(group, idx) in shiftGroup" :key="idx">
{{group.name}}
<ul>
<li v-for="(shift, idx2) in shiftCollections[group.id]" :key="idx1+idx2">{{shift.name}}</li>
</ul>
</li>
</ul>
This is very bad code, and actually, the more I think about it, the more I think that it's just impossible to achieve.
Of course I thought of using programmatic binding like explained in the official doc:
this.$bind('documents', documents.where('creator', '==', this.id)).then(
But the first argument has to be a string whereas I need to work with dynamic data.
If anyone could suggest me a way to obtain what I described.
Thank you all very much
So I realize this is an old question, but it was in important use case for an app I am working on as well. That is, I would like to have an object with an arbitrary number of keys, each of which is bound to a Firestore document.
The solution I came up with is based off looking at the walkGet code in shared.ts. Basically, you use . notation when calling $bind. Each dot will reference a nested property. For example, binding to docs.123 will bind to docs['123']. So something along the lines of the following should work
export default {
name: "component",
data: function () {
return {
docs: {},
indices: [],
}
},
watch: {
indices: function (value) {
value.forEach(idx => this.$bind(`docs.${idx}`, db.doc(idx)))
}
}
}
In this example, the docs object has keys bound to Firestore documents and the reactivity works.
One issue that I'm trying to work through is whether you can also watch indices to get updates if any of the documents changes. Right now, I've observed that changes to the Firestore documents won't trigger a call to any watchers of indices. I presume this is related to Vue's reactivity, but I'm not sure.
I am working on project with JSViews, Observables and TypeScript.
I planned to handle several languages so I have an object that holds french and english version. A class with static methods that returns the collection of names and an array with all the static objects.
I wanted to display the objects in a dropdown with a converter to fetch the english name, I managed to fill the dropdown and react on change but I can't display the current item in the dropdown and I don't see what is missing.
Could you please help ? I made a javascript sample here :
https://jsfiddle.net/ClaudeVernier/v093uqg0/
var data = new dataModel();
for (var member in Harbors) {
if (typeof Harbors[member] == "object" && Harbors[member].name) {
data.harbors.push(Harbors[member]);
}
}
var myTmpl = $.templates("#harborTmpl");
myTmpl.link("#container", data);
$.observe(data, "*", myHandler);
Then, I'll need to figure how to change language on the click of a button, if you have idea on that... it would help :-)
Many thanks,
Claude
Take a look at Data-linked <select> elements - including the section <select> with converters.
Your code:
<select id="cboHarbor" data-link="{{getName:activeHarbor}}">
is incorrect. You need to data-link to activeHarbor. If activeHarbor was a string, you could data-link using:
<select id="cboHarbor" data-link="activeHarbor">
but since it is an object you need to have some kind of string-valued property for each harbor object, that you can then use for each option value. Then you will use converters to convert back and forth between the activeHarbor object and its string value property for the data-link binding behavior.
For example you can use the name in the current language as string value, but it is a bit strange to use a value that changes based on current language. But you need a getHarbor converter to convert back to get from the name to the harbor object. That would look like this:
<select id="cboHarbor" data-link="{getName:activeHarbor:getHarbor}">
{^{for harbors}}
<option data-link="{getName:}"></option>
{{/for}}
</select>
Alternatively you can use the index of the harbor in the array, like this:
<select id="cboHarbor" data-link="{getIndex:activeHarbor:getHarbor}">
{^{for harbors}}
<option value="{{:#index}}" data-link="{getName:}"></option>
{{/for}}
</select>
with converters as follows:
$.views.converters({
getIndex: function (harbor) {
return harbor.index;
},
getHarbor: function (index) {
return data.harbors[index];
},
getName: function (harbor) {
return harbor.name[data.languages[data.currentLanguage]];
}
});
If you want to be able to dynamically change language and have the harbors drop-down switch to the new language, then you must make your getName converter depend on the current language, like this:
$.views.converters.getName.depends = [data, "currentLanguage"];
Here is an updated version of your jsfiddle complete with a language drop-down to switch language.
UPDATE:
Concerning the depends for getName, a modified jsFiddle has this:
function getName(harbor) {
return harbor.name[data.languages[data.currentLanguage]];
}
$.views.converters({
getName: getName,
...
});
getName.depends = [data, "currentLanguage"];
So you can simply use a getName function as your converter function, and then in the context in which you have access to the data instance (in a done() if it needs to be async), you then assign the depends:
getName.depends = [data, "currentLanguage"];
No need to use $.views.converters.getName.depends
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.
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;
},