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'
});
});
},
Related
I am new to vuejs and I am making an app which should filters all the data from database and filter parameters should be passed in URL, so that it remain in the page even after page refresh.
Firstly, I want to push search params in URL
My current Url localhost:8080/product
I want my Url to be like below when user click checkboxes
localhost:8080/product?color=red&color=green&size=small (When user checks red, green and small options)
So far, I have done this and I am stuck how to get dynamic color in $this.router.push(), and append it to URL
<template>
<div class="products">
<h1>Filter By Color</h1>
<input #click="filterData" v-model="colortype" type="checkbox">Red color
<input #click="filterData" v-model="colortype" type="checkbox">Green color
<input #click="filterData" v-model="colortype" type="checkbox">Yellow color
<h1>Filter By Size</h1>
<input #click="filterData" v-model="size" type="radio">Big
<input #click="filterData" v-model="size" type="radio">Small
</div>
</template>
<script>
export default {
data() {
return {
colortype:''
}
},
methods:{
filterData() {
this.$router.push({ path: "product", query: { color: "red" } });
}
}
}
</script>
Any suggestions, once I push params to URL, I want to do api request to endpoint in filterData method.
There is a pattern you can use for this:
Store the filter values on an object
Deeply watch the filter object and react to it by fetching data / updating url.
The following snippets demonstrate a dropdown where you can pick one value to filter on.
<template>
<div>
Color:
<select v-model="filter.color">
<option v-for="item in colors" :key="item.value" :value="item.value">
{{ item.name }}
</option>
</select>
</div>
</template>
export default {
name: "MyComponent",
data: () => ({
filter: {
color: null,
},
colors: [{name: 'Black', value: 'black'}, {name: 'Red', value: 'red'}],
}),
watch: {
'filter': {
deep: true,
handler(filter) {
this.$router.replace({
...this.$route,
query: {
color: filter.color.value,
// TODO: Convert `filter` to params
},
});
this.search(filter);
},
},
},
};
For the case where there a field accepts multiple values (e.g. using checkboxes) I'd suggest to put all values on the filter object and have each option mark its checked-ness with a flag. The following snippets demonstrate that technique:
<template>
<div>
Sizes:
<label v-for="size in sizes" :key="size.value">
<input type="checkbox" v-model="size.active">
{{ size.name }}
</label>
</div>
</template>
export default {
data: () => ({
filter: {
sizes: [{name: 'Small', value: 'small', active: false}],
},
}),
watch: {
filter: {
deep: true,
handler() {
this.$router.replace({
...this.$route,
params: {
sizes: this.filter.sizes
.filter(size => size.active)
.map(size => size.value)
.join('+'),
},
});
},
},
},
}
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 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 Bootstrap Vue to render a select input. Everything is working great - I'm able to get the value and change the UI based on the option that was selected.
I am trying to change the headline text on my page - to be the text of the selected option. I am using an array of objects to render the options in my select input.
Here is what I'm using for my template:
<b-form-group
id="mySelect"
description="Make a choice."
label="Choose an option"
label-for="mySelect">
<b-form-select id="mySelect"
#change="handleChange($event)"
v-model="form.option"
:options="options"/>
</b-form-group>
Here is what my data/options look like that I'm passing to the template:
...
data: () => ({
form: {
option: '',
}
options: [
{text: 'Select', value: null},
{
text: 'Option One',
value: 'optionOne',
foo: {...}
},
{
text: 'Option Two',
value: 'optionTwo',
foo: {...}
},
}),
methods: {
handleChange: (event) => {
console.log('handleChange called');
console.log('event: ', event); // optionOne or optionTwo
},
},
...
I can get optionOne or optionTwo, what I'd like to get is Option One or Option Two (the text value) instead of the value value. Is there a way to do that without creating an additional array or something to map the selected option? I've also tried binding to the actual options object, but haven't had much luck yet that route either. Thank you for any suggestions!
Solution
Thanks to #Vuco, here's what I ended up with. Bootstrap Vue passes all of the select options in via :options. I was struggling to see how to access the complete object that was selected; not just the value.
Template:
<h1>{{ selectedOption }}</h1>
<b-form-group
id="mySelect"
description="Make a choice."
label="Choose an option"
label-for="mySelect">
<b-form-select id="mySelect"
v-model="form.option"
:options="options"/>
</b-form-group>
JS:
...
computed: {
selectedOption: function() {
const report = this.options.find(option => option.value === this.form.option);
return option.text; // Option One
},
methods: {
//
}
...
Now, when I select something the text value shows on my template.
I don't know Vue bootstrap select and its events and logic, but you can create a simple computed property that returns the info by the current form.option value :
let app = new Vue({
el: "#app",
data: {
form: {
option: null,
},
options: [{
text: 'Select',
value: null
},
{
text: 'Option One',
value: 'optionOne'
},
{
text: 'Option Two',
value: 'optionTwo'
}
]
},
computed: {
currentValue() {
return this.options.find(option => option.value === this.form.option)
}
}
});
<div id="app">
<b-form-group id="mySelect" description="Make a choice." label="Choose an option" label-for="mySelect">
<b-form-select id="mySelect" v-model="form.option" :options="options" />
</b-form-group>
<p>{{ currentValue.text }}</p>
</div>
Here's a working fiddle.
You have an error in your dictionary.
Text is showed as an option.
Value is what receive your variable when option is selected.
Is unneccesary to use computed property in this case.
let app = new Vue({
el: "#app",
data: {
form: {
option: null,
},
options: [{
value: null,
text: 'Select'
},
{
value: 'Option One',
text: 'Option One'
},
{
value: 'Option Two',
text: 'Option Two'
}
]
}
});
Fiddle with corrections
Documentation
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/