I am using this https://vue-select.org/guide/values.html#caveats-with-reduce library for my application dropdown option.
<v-select
v-model="project_data.country"
label="text"
:options="project_data.countries"
:state="errors.length > 0 ? false : null"
:reduce="text => text.value"
/>
Now, on my local I can see the option value like this :
But on the server I can see the ID instead of the option value:
I do not understand why it's happening :(
Basically I am trying to use the :reduce props to get the single value as it's defined in the doc: https://vue-select.org/guide/values.html#transforming-selections
Related
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
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?
I would like to find if my duration is > 0. I use MomentJs and Vue to get my duration using this code :
moment3: function (date) {
var now = moment();
var day = moment(date);
var duration = day.diff(now);
return parseInt(duration);
},
I get the duration correctly (2987546325 in example). But still this code not working.
<a v-if="event.time | moment3 > 0"> Do somethingHere </a>
Thank you for help.
I assume that you're trying to use moment3 as a Vue filter function.
There are two problems here:
You can't use a filter function in a v-if expression. They're only available inside a {{ ... }} or a v-bind expression.
You can't put anything after a filter function, other than the function's arguments or another filter function. So the > 0 isn't allowed even if you were in a {{ ... }} or v-bind.
See https://v2.vuejs.org/v2/guide/filters.html
The | character will just be interpreted as JavaScript's bitwise OR operator in this case.
You'd probably be better off just using a method instead. So define moment3 inside your component's methods and then call it using v-if="moment3(event.time) > 0".
Is there an option to display or hide a string based on a truthy value and when falsy it displays none, or can we only use ternary operator for this.
I know it is possible to do with class binding, where you add a value and then add the condition:
:class="{ 'class-only-if-true': false }"
so my question would be if it is possible to do the following only as a string:
{{'only display if true' : true}}
and possibly concatenate with data as such:
{{'only '+data+' if true' : true}}
While I know it would be possible adding a wrapper tag around this and adding the condition in here, but in this case I can't use any <div>, <span> or other.
While I could make it work as such (ternary operator):
{{ true ? 'only '+data+' if true' : ''}}
I was wondering if there would be an approach I have overlooked similar to the class binding condition.
Hope this makes sense.
Instead of the ternary operator {{ true ? 'only '+data+' if true' : ''}}, you could use the && operator like {{ true && 'only '+data+' if true'}}. Of course don't use data as it points to the components whole data object.
Basically i have two dropdowns. based on a value selected in one dropdown I want to hdie certain options in another dropdown.
I tried adding a className parameter to the option object along with label and value params and tried setting the display of all options with the above className to none but it did not set the className of the option to the one i specified.
[{'label':'x','value':'y',className:'hide'}]
.hide{
display:none
}
You can do that using custom option, documentation for v2 is here:
https://react-select.com/components#replacing-components
But in your case, i think you should add some value to object list, for example:
{label: 'Example', value: '1234', shouldBeDisplayed:'false'}
Next step is customize custom option:
const option = (props: OptionProps<any>) => (
<div {...props.innerProps}>
{props.data.shouldBeDisplayed? props.label : null}
</div>
);
Using inside select:
<Select components={{ Option: option }} ..... />
Hope it helps :)
According to https://react-select.com/props
filterOption
Custom method to filter whether an option should be displayed in the menu
You just need to use filterOption
For example if you want to hide an option with value="hiddenOption" you need :
<Select filterOption={(option) => option.value !== "hiddenOption"} />