Develop Reference

React Select abreviate dropdown names on multi select

Hi is it possible to abbreviate dropdown names when selected like the figure below
this is my code :
multiValue: [
{ value: "BUF", label: "BUF" },
{ value: "CCT", label: "CCT" },
{ value: "JHB", label: "JHB" },
{ value: "EKH", label: "EKH" },
{ value: "ETK", label: "ETK" },
{ value: "MAN", label: "MAN" },
{ value: "NMB", label: "NMB" },
{ value: "TSH", label: "TSH" }
],
handleMultiChange(option) {
this.setState({multiValue: option});
}
<Select
id='multiple'
name="filters"
placeholder="Filter City"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange}
isMulti={this.state.isMulti}
styles={style}
/>

You could accomplish this by providing a custom MultiValueLabel component
MultiValueLabel.component.js
export default function MultiValueLabel({
data,
innerProps,
selectProps
}) {
// ...any logic you might need
// 'data' should be the full object of each selected item
// so reference whatever key is necessary
return (
<div {...innerProps}>
{data.abbr}
</div>
)
}
Then you just pass that in
<Select
components={{
MultiValueLabel
}}
... other props
/>

Vuetify v-select + item-disabled how to use it?

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

ReactJS: how to set a default option for a semantic ui dropdown component?

I have the following const containing my semantic ui dropdown content:
const lessonGroup = [
{ key: 'r', value: 'regular', text: 'Regular lesson' },
{ key: 'wp', value: 'wp', text: 'Weak Point lesson' },
{ key: 'wt', value: 'wt', text: 'World Tour lesson' },
]
Then the following code:
<Dropdown
placeholder='Lesson type'
search
selection
options={lessonGroup}
defaultOption='r'
/>
I'm not sure how I can give to the dropdown a default selected option. I played around with defaultOption but with no success. Any help is appreciated. Thank you.

VueJS 2: cannot set two-way data-binding for input components

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).

React Semanti UI DropDown with onClick Even on individual Options

React Semantic UI has DropDown with properties of OnClick
is it possible to make each selection with different onClick event. Pretty much have each selection to run separate function. so in the following example I need if angular was selected a runs a function that is different than css, or design
const options = [
{ key: 'angular', text: 'Angular', value: 'angular' },
{ key: 'css', text: 'CSS', value: 'css' },
{ key: 'design', text: 'Graphic Design', value: 'design' },
{ key: 'ember', text: 'Ember', value: 'ember' },
{ key: 'html', text: 'HTML', value: 'html' },
{ key: 'ia', text: 'Information Architecture', value: 'ia' },
{ key: 'javascript', text: 'Javascript', value: 'javascript' },
{ key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
]
const DropdownExampleMultipleSelection = () => (
<Dropdown placeholder='Skills' fluid multiple selection options={options} />
)
I tried doing onchange but it gives me undefined value
handleChange = (e) => {
this.setState({value: e.target.value});
console.log('Dropdown changed ' + e.target.value);
return;
}
<Dropdown onChange={(e) => {this.handleChange(e)}} />

Code Sandbox with solution: https://codesandbox.io/s/vvz2yow5k5
class DropdownExampleMultipleSelection extends Component {
handleChange = (e, { value }) => {
// array of selected values
console.log(value);
};
render() {
return (
<Dropdown
placeholder="Skills"
fluid
multiple
selection
options={options}
onChange={this.handleChange}
/>
);
}
}

You can access the values by following:
handleClick = (e, data) => {
console.log(data.value)
console.log(e._targetInst.return.key)
}
data.value will give you all selected values while e._targetInst.return.key will give you key of currently changed element.
Working fiddle: https://stackblitz.com/edit/react-5b24ux?file=index.js
You can view values on each selection by opening the chrome devtools.