In my application I used office ui fabric react drop down control, when I click on button I need to check it's empty or not?
public options = [
{ key: 'Employee Name', text: 'Employee Name' },
{ key: 'Employee ID', text: 'Employee ID' },
{ key: 'Department', text: 'Department' }
];
<Dropdown defaultSelectedKey="Employee Name" options={this.options} onChange={this._onChange} />
<input type="button" value="Get Data" id="btnSub" onClick={() => this.readItem()} />
private readItem(): void {
what I need to do here
}
read the value from the event target.
(e) => this.readItem(e.value.target)
Related
I use vue-select in my project
When I use value and input alternative v-model
<div v-for="user in users" key="user.id">
<v-select
ref="Vueselect"
:value="user.roleName"
label="title"
:clearable="false"
:options="roleCategory"
#input="item => ChangeRole(item,user)"
/>
</div>
roleCategory
data() {
return {
roleCategory:[{value: 1 , title:'user'},{value: 1 , title:'admin'}],
users:[{id: 1 , title:'Test1',roleName='user'},{id: 2 , title:'Test2',roleName='admin'}],
}
},
ChangeRole()
methods: {
ChangeRole(item,user) {
this.$swal({
title: 'Are you sure?',
text: 'Do you want to change permision!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, Change it!',
customClass: {
confirmButton: 'btn btn-primary',
cancelButton: 'btn btn-outline-danger',
},
buttonsStyling: false,
}).then(result => {
if (result.isConfirmed) {
user.roleName = item.roleName
}
})
}
}
i use Sweet Alert
the dropdown after select not close
how can close dropdown programmatically
There is a solution to close v-select programmatically.
In your case this may help you:
const searchEl = this.$refs.Vueselect.searchEl;
if (searchEl) {
searchEl.blur();
}
I am using vuesax multiple select component to select multiple options from the available options. But when I try to submit/Insert the selected value to my API, the values from the component are being passed as arrays. But my API accepts only string values. Can anyone help me with code to this problem?
Vuesax component code
<vs-select multiple autocomplete v-model="newRecord.required_sub" label="Subject" class="selectExample mt-5 w-full" name="item-category" v-validate="'required'">
<vs-select-item :key="item.value" :value="item.value" :text="item.text" v-for="item in teach_mode_drop" />
</vs-select>
my script for options
teach_mode_drop: [
{text:'Option1', value:'Option1'},
{text:'Option2', value:'Option2'},
{text:'Option3', value:'Option3'},
{text:'Option4', value:'Option4'},
],
main method
createRecord() {
this.$vs.loading();
jwt.createLeads(this.newRecord).then((response) => {
this.$vs.loading.close();
this.$vs.notify({
title: 'Success',
text: response.data.message,
iconPack: 'feather',
icon: 'icon-alert-circle',
color: 'success'
});
this.$store.dispatch("userManagement/upsertToState", { type: "Leads", data: response.data.leads });
this.newRecord.first_name = this.newRecord.last_name = this.newRecord.email_id = this.newRecord.phone_number = this.newRecord.location = this.newRecord.required_sub =''
}).catch((error) => {
console.log(error)
this.$vs.loading.close();
this.$vs.notify({
title: 'Error',
text: 'There was an error creating the Lead',
iconPack: 'feather',
icon: 'icon-alert-circle',
color: 'danger'
});
});
},
I have bound a checkbox (output from options data in a loop):
<input type="checkbox" v-model="option.active">
options: [
{
name: 'one',
active: false,
},
{
name: 'two',
active: false,
},
....
]
I also want a button to be able to turn off the checkbox.
How can I also bind a button to the model?
You have to use the click event of the button:
<button v-on:click="option.active = false">Click</button>
or
<button #click="option.active = false">Click</button>
I am developing an add-in for Outlook using office-ui-fabric-react, using Typescript. I have a dialog that has a choice group, a text field, a default button, and a primary button, as shown here:
export interface ChoiceGroupDemoProps {
onChoiceGroupChange: (ev: React.FormEvent<HTMLInputElement>, option: any) => void;
onTextFieldChanged: (newText: string) => void;
onSubmit: () => void;
onCancel: () => void;
}
export const ChoiceGroupDemoForm: React.StatelessComponent<ChoiceGroupDemoProps> = (props: ChoiceGroupDemoProps): JSX.Element => {
return (
<div>
<div>
<ChoiceGroup
defaultSelectedKey='A'
options={[
{
key: 'A',
text: 'Test 1',
} as IChoiceGroupOption,
{
key: 'B',
text: 'Test 2'
},
{
key: 'C',
text: 'Test 3',
}
]}
required={true}
onChange={props.onChoiceGroupChange}
/>
<TextField
multiline
rows={4}
placeholder='Comments'
onChanged={props.onTextFieldChanged}
/>
<div>
<DefaultButton text='CANCEL' onClick={props.onCancel} />
<PrimaryButton text='SUBMIT' onClick={props.onSubmit}/>
</div>
</div>
</div>
);
};
The choice group radio buttons require two clicks to select a button, and typing in the text field deselects the radio buttons.
None of the examples show anything beyond a choice group by itself. How do I get a component to work with this combination of ui components?
Upgrading to version 6.153.0 solved the problem.
I am creating an application using Quasar and VueJS. I am able to generate a dynamic form on click of the add button, but not able to delete any of the newly generated form based on the click of the delete button.Find the code below:
<template>
<div v-for="h in htmlList">
<div v-for="r in h" >
<div v-html="r" v-on:click="useRemoveFromProject(1)" v-bind:id="r.id">
</div>
</div>
</div>
</template>
<script>
/*
* Root component
*/
import Vue from 'vue'
export default {
name: 'q-app',
data () {
return {
flag: 0,
htmlList: [],
select: 'fb',
select1: 'fb1',
multipleSelect: ['goog', 'twtr'],
usersInProject: [],
selectOptions: [
{
label: 'Google',
value: 'goog'
},
{
label: 'Select',
value: 'fb'
},
{
label: 'Twitter',
value: 'twtr'
},
{
label: 'Apple Inc.',
value: 'appl'
},
{
label: 'Oracle',
value: 'ora'
}
],
selectOptions1: [
{
label: 'Integer',
value: 'goog1'
},
{
label: 'Float',
value: 'fb1'
},
{
label: 'String',
value: 'twtr1'
}
]
}
},
methods: {
useRemoveFromProject: function (id) {
console.log('hi....')
Vue.delete(this.htmlList, id)
},
identifyMe: function (event) {
alert('hi - ' + event.target.id)
},
process: function () {
this.flag += 1
let temp = []
temp.push('<div class="card" id="a_' + this.flag + '"> <div class="card-content content-center "> <large id="l4">Expression LHS:</large> <input><br> <large id="l5">Operators:</large> <q-select type="radio" v-model="this.select" :options="this.selectOptions"></q-select><br><large id="l4">Expression RHS:</large> <input><br><large id="l5">Data type:</large> <q-select type="radio" v-model="select1" :options="selectOptions1"></q-select><br></div><button class="cordova-hide circular red " style="margin-bottom:5px; margin-right:30px;" v-on:click="userRemoveFromProject(i)"><i>delete</i></button><input value="click" type="button"> </div>')
let ids = ['a_' + this.flag]
console.log(ids)
this.htmlList.push(temp)
}
}
}
</script>
After looking to your code i noticed that you have some errors:
Call function useRemoveFromProject without the 'r' of 'user'
Call userRemoveFromProject when clicking on the element and not only the delete button
Call userRemoveFromProject(i) with a 'i' variable, but what is 'i' ?
Why using a double v-for? The first level is enough.
I propose to you a working example on a fiddle. Please let me know if it's useful for you (and mark it as resolve if it's the case).
EDIT: for Vue.js 2 https://jsfiddle.net/86216oko/