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();
}
Related
I'm new to vue, I still don't understand everything, tell me. I have buttons that I display through v-for, I need to get the active class of only one button when pressed, all the others need to be turned off, tell me, preferably visually, how can I do it better?
I am using the method activeBtn, but this doesn't turn off the active class from the previous buttons
activeBtn(event, index) {
this.buttons[index].isActive = !this.buttons[index].isActive;
<script>
data() {
return {
buttons: [
{
label: "A",
isActive: false,
type: "border-left",
name: "BorderLeftComonent",
},
{
label: "A",
isActive: false,
type: "text-balloon",
name: "TextBalloonComponent"
},
{
label: "A",
isActive: false,
type: "dashed",
name: "DashedComponent"
},
],
};
},
methods: {
activeBtn(event, index) {
this.buttons[index].isActive = !this.buttons[index].isActive;
}
</script>
<template>
<div id="btn-box">
<button
v-for="(button, index) in buttons"
:key="index"
:class="button.isActive ? 'on' : 'off'"
#click="component = button.name, activeBtn($event, index)">
<div :class="`btn btn-${button.type}`">{{ button.label }}</div>
</button>
</div>
</template>
Since you only want to get one active button at any one point, it doesn't make sense to manage the active state inside each button.
Instead, you should manage it at group level by storing the currently selected button's id. A button would then be active when its id matches the currently selected id.
Here's an example:
new Vue({
el: '#app',
data: () => ({
buttons: [
{
id: "button-1",
label: "A",
type: "border-left",
name: "BorderLeftComonent"
},
{
id: "button-2",
label: "A",
type: "text-balloon",
name: "TextBalloonComponent"
},
{
id: "button-3",
label: "A",
type: "dashed",
name: "DashedComponent"
}
],
activeButtonId: "button-1"
}),
methods: {
activate(id) {
this.activeButtonId = id;
}
}
})
.on {
background-color: red
}
.off {
background-color: blue
}
.on, .off {
color: white
}
<script src="https://unpkg.com/vue#2/dist/vue.min.js"></script>
<div id="app">
<div>
<button
v-for="{id, type, label} in buttons"
:key="id"
:class="activeButtonId === id ? 'on' : 'off'"
#click="activate(id)"
>
<div :class="`btn btn-${type}`" v-text="label" />
</button>
</div>
</div>
i have this select:
<b-form-group
label-cols-sm="2"
label-cols-lg="2"
content-cols-sm
content-cols-lg="10"
v-bind:label="$t('vue.contract_terms')"
label-for="contract_terms"
v-show="contract">
<b-form-select
:options="contract_terms"
v-model="form.contract_data.contract_terms"
id="contract_terms"
:state="validate(form.contract_data.contract_terms)">
</b-form-select>
</b-form-group>
i want to show it when in my other select i choose all values except "vat" and "international_contract"
this is my js (hiring_types are the options of my other select) setSelected is my method to show my select above but i want to show it when i choose all values except "vat" and "international_contract":
data: (instance) => {
return {
contract: true,
}
},
computed:{
hiring_types () {
return [
{value: 'contract' , text: this.$t('vue.freelance')},
{value:'vat' , text: this.$t('vue.employment')},
{value: 'apprenticeship', text: this.$t('vue.apprenticeship')},
{value:'co_co_co' , text: this.$t('vue.co_co_co')},
{value: 'international_contract' , text: this.$t('vue.international_contract')}
]
},
},
methods:{
setSelected(value) {
this.hiring_contract_category = value;
this.contract = value === 'contract';
},
}
How can i do?
You can use Vue's template conditionals:
<template v-if='["vat", "international_contract"].map(val => !hiring_types.map(entry => entry.value).includes(val)).every(v => v)'>
<!-- insert b-form-group -->
</template>
Better to make this conditional a computed property and use it in your template for brevity:
// in your script
{
computed: {
showFormGroup () {
return ["vat", "international_contract"]
.map(val => !hiring_types.map(entry => entry.value)includes(val))
.every(v => v)
}
}
// in your template
<template v-if='showFormGroup'> ... </template>
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 want to show a modal for confirm the action when you change the selected value in a b-form-selected. I can't to stop the event and it always changes the value before the modal shows. Is there an option for this?
<b-form-select
id="serviceType"
v-model="serviceTypeSelected"
class="dropdown textfield"
:data-value="serviceTypeSelected"
:value="serviceTypeSelected"
required
#change="changeServiceType">
<option
v-for="option in serviceTypeList"
:key="option.serviceTypeId"
:value="option.serviceTypeId">
{{ option.serviceTypeName }}
</option>
</b-form-select>
function changeServiceType () {
this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.', {
title: 'Please Confirm',
size: 'sm',
okTitle: 'YES',
cancelTitle: 'NO',
centered: true
})
.then(value => {
if (value) {
//do things
} else {
//nothing
}
})
.catch(err => {
// An error occurred
})
}
Here's how i would suggest doing it.
You have one data property selectedOption which you bind to your b-select, this option will be what is shown in the select.
You then have another data property actualOption which is the final value. So when you change your b-select value, you open the dialog to confirm. If the user confirms, you set actualOption to the new selected value. If the user declines you set this.selectedOption back to the old value, which is the value of actualOption.
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
selectedOption: 0,
actualOption: 0,
options: [
{ value: 0, label: 'Orange' },
{ value: 1, label: 'Apple' },
{ value: 2, label: 'Banana' },
{ value: 3, label: 'Strawberry' },
{ value: 4, label: 'Mango' }
]
}
},
methods: {
onOptionChanged(value) {
this.$bvModal.msgBoxConfirm('Please confirm that you want to delete everything.')
.then(confirmed => {
if(confirmed) {
this.actualOption = value;
} else {
this.selectedOption = this.actualOption;
}
}).
catch(() => {
/* Reset the value in case of an error */
this.selectedOption = this.actualOption;
})
}
}
})
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.3.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.3.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-select
v-model="selectedOption"
required
#change="onOptionChanged">
<option
v-for="option in options"
:key="option.value"
:value="option.value">
{{ option.label }}
</option>
</b-select>
</div>
I have used Sweet Alerts to replicate your situation, works the same just change it to your model.
Create an additional value in your data object which you are going to use to check against your model input.
In your #change function, you check if user agrees to change data or to cancel the change.
If user cancels : set serviceTypeSelected v-model to the new inputVal value (your history) to undo the change.
If user accepts : run confirmation dialog and set inputVal to the input value (this is to save your history)
data() {
return {
serviceTypeSelected: '',
inputVal: '',
}
},
methods: {
changeServiceType(id){
this.$swal({
title: "Are you sure ?",
text: "You are going to change the service type!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#f2ab59",
confirmButtonText: "Yes, change service type!",
cancelButtonText: "No, cancel!",
}).then((confirmed) => {
if (confirmed.value) {
this.$swal(
'Changed!',
'Service type has been changed.',
'success'
);
this.inputVal = id;
} else {
this.$swal("Cancelled", "Service type hasn't been changed !", "error");
this.serviceTypeSelected = this.inputVal;
// this.serviceTypeSelected = '';
// this.inputVal = '';
}
});
}
}
<b-form-select
id="serviceType"
v-model="serviceTypeSelected"
:data-value="serviceTypeSelected"
:value="serviceTypeSelected"
class="dropdown textfield"
required
#change="changeServiceType">
<option>Test1</option>
<option>Test2</option>
</b-form-select>
If interested in Sweet Alerts as I used it for this particular question.
vue-sweetalert2 npm
npm i vue-sweetalert2
Sweet Alert has a nice documentation and is good to use with vue.js.
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/