at sample of
https://vuetifyjs.com/en/components/selects/#multiple
<v-select
v-model="value"
:items="items"
multiple
item-disabled=['foo','fizz'] //read only not work?
></v-select>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
value: ['foo', 'bar', 'fizz', 'buzz'],
}),
}
</script>
As mentioned in the Vuetify documentation, your items can be an array of objects with the following properties:
{
text: string | number | object,
value: string | number | object,
disabled: boolean,
divider: boolean,
header: string
}
Your example becomes:
<template>
<v-select
v-model="value"
:items="items"
multiple
></v-select>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "foo",
value: "foo",
disabled: true,
},
{
text: "bar",
value: "bar",
},
{
text: "fizz",
value: "fizz",
disabled: true,
},
{
text: "buzz",
value: "buzz",
},
],
}),
};
</script>
As per the github issue raised here [Which is still open]: https://github.com/vuetifyjs/vuetify/issues/5557
If an array is passed it's used as a path to a property (['a', 'b'] is
'a.b'), not a list of item values.
So as per now, we cannot pass array directly to item-disabled to make some options disabled.
As mentioned in above answer,
Your current array needs to be converted to array of objects in order for
item-disabled to work. We need to pass array of objects with disabled:true for the objects that needs to be disabled.
[
{text: 'Bar', value: 'Bar'},
{text: 'Gizz - Disabled', value: 'Gizz', disabled: true}
]
Here is the example - https://codepen.io/akshayd21/pen/qBqGONz
Similar questions for reference:
How can I disable literal values in Vuetify?
v-select deactivate some items/options
Related
<n-select v-model:value="value" :options="options" />
options: [
{
label: "Everybody",
value: 'document',
},
{
label: 'Drive My Car',
value: 'class'
}
]
value: ref('document),
en:
class: Class
document: Document
cn:
class : 类
document: 文档
How can I translate the option in SELECT using i18N in VUE3
Looking forward to help
you need to
import { t } from 'boot/i18n'
const { t, locale } = useI18n()
and then
in html template:
{{ $t('nameOfTextblock') }}
in your script
t('nameOfTextblock')
in the props
:propertyName="$t('nameOfTextblock')"
I need to format a value to currency using the bootstrap-vue formatter (b-table - fields).
My current attempt:
fields: [
{ key: 'value', label: 'value(R$)', sortable: true,
formatter: (value, key, item) => {
return Number(item.value).toLocaleString('pt-BR', {
style: 'decimal', currency: 'BRL'
})
}
},
]
I need to somehow format these values that I get from my backend (axios).
Can help-me?
To format a number to a currency using toLocaleString you need to use the style: 'currency' option.
You can read more about toLocaleString here.
If you scroll down to the examples, and continue down to the using options section, you will see a couple example of the style: 'currency' option. Which is where i found the information.
For the different options you can also refer to the Intl.NumberFormat parameters section.
Note that this will not do any currency conversions.
See below snippet.
new Vue({
el: '#app',
data() {
return {
items: [
{ value: 123.45 },
{ value: 23 },
{ value: 12.6 }
],
fields: [
{ key: 'value', label: 'value(R$)', sortable: true,
formatter: (value, key, item) => value.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
},
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
<b-table :items="items" :fields="fields"></b-table>
</div>
toLocaleString didn't work for me, this a possible solution:
formatter: (value, key, item) => {
let formatter = new Intl.NumberFormat("es-ES", {
style: "currency",
currency: "EUR",
minimumFractionDigits: 2
});
return formatter.format(value);
}
Thanks.
I was also able to do it this way:
{ key: 'value', label: 'value(R$)', sortable: true,
formatter: (value, key, item) => {
return Number(item.value/100).toLocaleString('pt-BR', {minimumFractionDigits: 2, style: 'decimal', currency: 'BRL'})
}
},
I am implementing primeng multiselect with Angular5, javascript. when I am selecting option from the multiselect dropdown, I am getting all options getting selected.
<p-multiSelect [options]="options" appendTo="body" [maxSelectedLabels]="2" [defaultLabel]="defaultLabel"></p-multiSelect>
options: Array<any> = [
{ name: "Options1", label: "Options1", type: "string", selected: true, id: 1 },
{ name: "Options2", label: "Options2", type: "number", selected: false, id: 2 },
{ name: "Options3", label: "Options3", type: "boolean", selected: false, id: 3 },
{ name: "Options6", label: "Options6", type: "number", selected: false, id: 4 },
{ name: "Options7", label: "Options7", type: "ddn", selected: false, id: 5 },
{ name: "Options8", label: "Options8", type: "date", selected: false , id: 6}
];
When I am using 'value' in json, the functionality is working fine. But, this is a restriction.
'MultiSelect requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.'
This is written in Primeng documents for getting started with Multiselect
I tried 'datakey' also as per documentation, but still, I am not able to get the desired result.
I want to bind options with any other key other than 'value' and then on selecting an option, it should particular and only option.
Being quite new to Vue, I ran into the issue when I cannot establish binding between input/select tags inside components and the data inside Vue instance.
Example #1:
html
<sidebar-select
:title="UI.sidebar.localeSelect.title"
:name="UI.sidebar.localeSelect.name"
:options="UI.sidebar.localeSelect.options"
:vmodel="selectedLocale">
</sidebar-select>
<sidebar-select
:title="UI.sidebar.currencySelect.title"
:name="UI.sidebar.currencySelect.name"
:options="UI.sidebar.currencySelect.options"
:vmodel="state.currency">
</sidebar-select>
js - component
Vue.component('sidebar-select', {
props: ['title', 'name', 'options', 'vmodel'],
data() {
return {
vmodel: this.value
}
},
template: `<div class="col-xs-12 col-md-6" style="padding-left:0;padding-right:30px">
<div class="cg">
<label :for="name"><h4>{{ title }}</h4></label>
<select class="form-control form-horizontal" style="max-width: 300px"
:name="name"
v-model="vmodel">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
</div>
</div>`
});
js - data part
var app = new Vue({
el: '#app',
data: {
selectedLocale: 'ru',
user: {
'ru': {
name: 'Саша',
surname: 'Найдович',
position: 'программист',
phone: '1234567',
email: 'jdlfh#jdlbf.com'
},
'en': {
name: 'Alex',
surname: 'Naidovich',
position: 'frontend',
phone: '1234567',
email: '1234567#email.eu'
}
},
state: {
locale: 'ru',
currency: '€',
/* *** */
},
UI: {
sidebar: {
localeSelect: {
title: 'Язык КП',
name: 'offer-lang',
options: [
{value: 'en', text: 'International - English'},
/* *** */
{value: 'ru', text: 'Русский'}
],
preSelected: 'ru',
stateprop: 'locale'
},
currencySelect: {
title: 'Валюта КП',
name: 'offer-curr',
options: [
{value: '$', text: '$ (Dollar)'},
{value: '€', text: '€ (Euro)'},
{value: '₤', text: '₤ (UK Фунт)'},
{value: '₽', text: '₽ (RUS Рубль)'},
{value: '', text: 'Ввести вручную'}
],
preSelected: '€',
stateprop: 'currency'
},
} /* etc */
}
}
});
There are 2 errors I run into: [Vue warn]: The data property "vmodel" is already declared as a prop. Use prop default value instead. at init and [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "vmodel" vhen I try to change selects. I wish to know what am I doing wrong and what would be the best-practice way for this case.
UPDATE: the main question is about how to properly use v-model two-way-data-binding when passing v-model as an argument into the props of component.
To be updated: example #2 with text inputs will be added tomorrow (the code is left at work).
I'm building a form with a long list of select items using vue.js. I'm using the dynamic select list documented here: http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options
However, I want to allow users to quickly filter this list using the filterBy directive. I don't see how you can combine these two-- is it possible to filter a dynamic list? Or can filterBy only be used against a v-for?
In 0.12 you can use filters with the options param. The docs show a syntax that looks identical to filtering v-for.
Here is an example showing filterBy (uses version 0.12.16):
var app = new Vue({
el: '#app',
data: {
selected: '',
options: [
{ text: '1', value: 1, show: true },
{ text: '2', value: 2, show: false },
{ text: '3', value: 3, show: true },
{ text: '4', value: 4, show: true },
{ text: '5', value: 5, show: false },
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script>
<div id="app">
Filter by 'show' <br>
<select v-model="selected" options="options | filterBy true in 'show'"></select>
</div>
Note: the options param for <select v-model> has been deprecated in 1.0. In 1.0, you can use v-for directly within <select>. v-for can be nested to use optgroups.
Check this fiddle https://jsfiddle.net/tronsfey/4zz6zrxv/5/.
<div id="app">
<input type="text" v-model="keyword">
<select name="test" id="test">
<optgroup v-for="group in list | myfilter keyword" label="{{group.label}}">
<option value="{{item.price}}" v-for="item in group.data">{{item.text}}</option>
</optgroup>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
new Vue({
el: '#app',
data: function () {
return {
keyword : '',
list: [
{
label:'A',
data:[
{price: 3, text: 'aa'},
{price: 2, text: 'bb'}
]
},
{
label:'B',
data:[
{price: 5, text: 'cc'},
{price: 6, text: 'dd'}
]
}
]
}
},
filters : {
myfilter : function(value,keyword){
return (!keyword || keyword === 'aaa') ? value : '';
}
}
})
You can use v-for to create optgroups and then use filterBy or a custom filter instead(as in the fiddle) to filter your options data.
Hope it would help.