<a-radio-group
#change="changeName"
v-decorator="[
'name',
{ initialValue: 'light' },
]"
>
<a-radio value="iphone">Iphone</a-radio>
<a-radio value="samsung">Samsung</a-radio>
</a-radio-group>
<a-form-item label="Value" :colon="false">
<a-select placeholder="Select a value">
<a-select-option></a-select-option>
</a-select>
</a-form-item>
methods: {
changeName(event) {
var value = event.target.value;
if (value == 'iphone') {
// I want to assign the select-option the value :
//<a-select-option value="ip12">Iphone 12</a-select-option>
// <a-select-option value="ip13">Iphone 13</a-select-option>
} else {
//<a-select-option value="ss10">Samsung note 10</a-select-option>
// <a-select-option value="ss9">Samsung note 9</a-select-option>
}
}
}
How do I change the <a-select-option>s when I select a radio button?
You can compute the <a-select>'s options based on the <a-radio-group>'s value.
Instead of the change-event handler, use a v-model directive on the <a-radio-group> to store the selected brand, and on the <a-select> to store the selected phone:
<template>
<a-radio-group v-model="selectedBrand">
<!-- brands -->
</a-radio-group>
<a-select placeholder="Select a value" v-model="selectedPhone">
<!-- phone options -->
</a-select>
</template>
<script>
export default {
data () {
return {
selectedBrand: '',
selectedPhone: '',
}
}
}
</script>
Add a computed property for the options to show based on the selected brand:
const PHONE_OPTIONS = {
iphone: [
{ value: 'iph12', label: 'Iphone 12' },
{ value: 'iph13', label: 'Iphone 13' },
],
samsung: [
{ value: 'ss10', label: 'Samsung Note 10' },
{ value: 'ss9', label: 'Samsung Note 9' },
],
}
export default {
computed: {
phoneOptions() {
return PHONE_OPTIONS[this.selectedBrand]
},
},
}
Use a watcher on the phone options to automatically select the first one.
export default {
watch: {
phoneOptions(value) {
this.selectedPhone = value?.[0].value
},
},
}
Render the phone options:
<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</a-select-option>
demo
Related
I have made a child component - Dropdown based on Devextreme DxSelectBox.
I set in parent component v-model as attribute and forward to it an variable as ref, which is set to initial selected valueconst item = ref({ value: "option 1" }), but the DxSelectBox is empty when loading the project.
Child component - Dropdown is emitting the right selected option, but unfortunately the initial selected value is not set.
Code for Parent App.vue component is:
<template>
<template>
<Dropdown :items="items" v-model:option="item" />
<div class="emitting">Emitting: {{ item }}</div>
</template>
<script>
import { ref } from "vue";
import Dropdown from "./components/Dropdown.vue";
export default {
name: "App",
components: {
Dropdown: Dropdown,
},
setup(props, context) {
const emitValue = (e) => {
context.emit("update:option", e.value);
};
const items = ref([
{
value: "option 1",
},
{
value: "option 2",
},
{
value: "option 3",
},
]);
const item = ref({
value: "option 1",
});
return {
items,
item,
emitValue,
};
},
};
</script>
<style>
#import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.light.css";
#import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.common.css";
</style>
and code for Dropdown.vue component is:
<template>
<template>
<div class="dx-field">
<DxSelectBox
:data-source="items"
:value="option"
#valueChanged="emitValue"
:width="width"
:height="height"
:drop-down-options="{ width: width }"
display-expr="value"
:disabled="disabled"
:read-only="readOnly"
:hint="hint"
:placeholder="placeholder"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
import DxSelectBox from "devextreme-vue/select-box";
export default defineComponent({
name: "DpmDropdown",
components: {
DxSelectBox,
},
emits: ["update:option"],
props: {
label: { type: String, default: "" },
showLabel: { type: Boolean, default: true },
headingTooltip: { type: String, default: "" },
items: { type: Array, default: () => [] },
option: { type: Object, default: () => ({}) },
width: { type: [Number, String], default: "100%" },
height: { type: String, default: "40px" },
icon: { type: String, default: "" },
hint: { type: String, default: "" },
disabled: { type: Boolean, default: false },
readOnly: { type: Boolean, default: false },
placeholder: { type: String, default: "" },
},
setup(props, context) {
const emitValue = (e: any) => {
context.emit("update:option", e.value);
};
return {
emitValue,
};
},
});
</script>
The link for sandbox project is here.
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
/>
I want to multiply the unit 'count' and 'cost' in the same column of cells, and then load it on the 'money', and the 'money' is a data attribute value, but I can't bind this attribute after trying many times. How to do
Below is the code
enter image description here
<card>
<Table
border
:columns="preorder"
:data="preorderitem"
show-summary
>
<template
slot-scope="scope"
slot="name"
>
<strong>{{ scope.row.name }}</strong>
</template>
<template
slot-scope="{ row, index }"
slot="action"
>
<Button
type="error"
size="small"
#click="remove(index)"
>Delete</Button>
</template>
</Table>
</card>
export default {
data () {
return {
selectData: [],
preorder: [
{
title: 'itemname',
slot: 'name'
},
{
title: 'cost',
key: 'cost'
},
{
title: 'count',
key: 'count',
},
{
title: 'money',
key: 'money',
render: (h, params) => {
let str = params.row.cost * params.row.count;
return h('span', {
domProps: {
innerHTML: str
},
on: {
'on-change': e => {
this.preorderitem[params.row.money] = str;
}
}
})
}
}
]
}
A method will help you here :
in your example you can do the following :
methods:{
getMoney(cost,count){
return cost*count;
}
}
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.
While using angular ui grid we are using selectOptions to populate dropdown options as column filter. Something similar to the following code:
angular.module('exampleApp', ['ui.grid'])
.controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
var animals = [
{ id: 1, type: 'Mammal', name: 'Elephant' },
{ id: 2, type: 'Reptile', name: 'Turtle' },
{ id: 3, type: 'Mammal', name: 'Human' }
];
var animalTypes = [
{ value: 'Mammal', label: 'Mammal' },
{ value: 'Reptile', label: 'Reptile'}
];
$scope.animalGrid = {
enableFiltering: true,
columnDefs: [
{
name: 'type',
field: 'type',
filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
},
{ name: 'name', name: 'name'}
],
data: animals
};
}]);
<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<div ng-app="exampleApp">
<div ng-controller="exampleCtrl">
<h1>UI Grid Dropdown Filter Example</h1>
<div ui-grid="animalGrid" class="grid"></div>
</div>
</div>
This shows dropdown filter options for each column but with an extra empty option. How do I remove the empty/blank option or replace the empty/blank option with a 'All' text?
You can achieve this using a custom filter.
For your code snippet you would need to change the label property in animalTypes to id, and also add an option of 'All':
var animalTypes = [
{ value: 'All', id: '' },
{ value: 'Mammal', id: 'Mammal' },
{ value: 'Reptile', id: 'Reptile'}
];
Then modify the columnDef for the type column as follows:
columnDefs: [
{
name: 'type',
field: 'type',
// template for rendering a custom dropdown box
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>',
filter: {
// initialize the filter to 'All'
term: '',
// the dropdown options (used in the custom directive)
options: animalTypes
}
},
...
],
Please note that you will need to use the filter.term property to initialize the filter to 'All'. If you don't you will find that a blank option is inserted at the top of the dropdown box when the grid loads. Initializing the drop down prevents this from happening.
You can then define a custom drop down directive to render a select box containing the animalTypes options:
app.directive('myCustomDropdown', function() {
return {
template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
};
});
Please see this Fiddle for a working example