So i have a b-form-select with a v-model i need to change dynamically my issue is when i change the v-model to another element of the list the :options are taken from the selected value doesn't change
Code example :
<b-form-select :options="ListA" v-model="Depart" value-field="Livreur" text-field="Livreur"></b-form-select>
data(){
Depart:'',
ListA:[],
}
my method is simply :
function(){
this.Depart = this.ListA[0]
}
the list is structured as such :
this.ListA.push({Livreur:"example",id:0})
as far as i know it should change the selected value of the b-form-select but instead nothing at all happens , any ideas ? thank you in advance
Your value-field should probably be id not Livreur, except if Livreur is a unique identifier as well.
Relevant part in the documentation: https://bootstrap-vue.org/docs/components/form-select#changing-the-option-field-names
this.Depart should also not be an object, but the value of the identifier you chose in the value-field property. In your case it should be:
if value-field is id:
this.Depart = this.ListA[0].id
if value-field is Livreur:
this.Depart = this.ListA[0].Livreur
Related
Based on this threat I've managed (with special thanks to Tami) to create a dropdown menu with variable year numbers in it.
Now I would like to use that chosen value of that dropdown menu as a (part of the) placeholder for another input field.
I tried this with no luck:
[number* ba-maanden min:1 max:12 placeholder "cf7_get_input="recent-years""]
Does anyone has an idea how to get this done?
Thanks,
Vasco
This is not tested, but should work. You can either add this to your form itself by making it all inline and surrounded with <script> and </script> or add this to your theme's js file.
jQuery(function($) {
$('select[name="ba-maanden"]').on('change', function(){
// Assign variable $placeholder to the chosen value
let $placeholder = $(this).val();
// replace 'your-field-name' with the cf7 field name
$('input[name="your-field-name"]').attr('placeholder', $placeholder);
});
});
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
My code is as follows:
https://jsfiddle.net/urjg6fop/
I want "Select value" to be displayed initially, but instead it shows a blank.
My value is "", my model is tracker[city] and I intialise all the values of tracker[city] to be "" so I would expect the initial value of Select value to be displayed, but instead it is blank.
What am I doing wrong?
Vue cannot detect dynamic property addition or deletion, which is what you're doing in mounted():
this.tracker[city] = ""; // dynamically adding `city` keys to `tracker` object (DON'T DO THIS)
You'd have to use Vue.set or this.$set instead:
this.$set(this.tracker, city, "")
demo
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;
},