I need a single drop-down field on initial page load:
When the item from this drop-down is selected I need to load yet another drop-down with the same items:
After that same procedure:
I am able to hard-code it, but obviously it is not a good practice, since my repetition is limited by how many elements I put, besides reading the values becomes a problem because I have different v-model names for each input:
<div>
<label class='labelForm'>ORGANIZATION TO BE NOTIFIED:</label><br>
<select :class="{defaultSelect : newAlert.productFamily === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily'>
<option selected disabled value=''>Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select v-if="newAlert.productFamily != ''" :class="{defaultSelect : newAlert.productFamily2 === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily2'>
<option selected disabled value=''>Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select v-if="newAlert.productFamily2 != ''" :class="{defaultSelect : newAlert.productFamily3 === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily3'>
<option selected disabled value=''>Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
Is there a better way to load dynamically those drop-downs and read the values alltogether?
If I understand your question correctly, I suppose you could do something like this:
<select
v-for="(dropdown, index) in dropdowns"
:key="index"
v-if="index === 0 || dropdowns[index - 1].selected !== null"
v-model="dropdown.selected"
>
<option :value="null" selected disabled>Select</option>
<option
v-for="option in dropdown.options"
:key="option"
:value="option"
v-text="option"
></option>
</select>
--
data() {
return {
dropdowns: [
{
selected: null,
options: [
'Option 1',
'Option 2',
'Option 3'
]
},
{
selected: null,
options: [
'Option 1',
'Option 2',
'Option 3'
]
},
{
selected: null,
options: [
'Option 1',
'Option 2',
'Option 3'
]
},
]
}
}
If the options are always the same:
<select
v-for="(dropdown, index) in dropdowns"
:key="index"
v-if="index === 0 || dropdowns[index - 1].value !== null"
v-model="dropdown.value"
>
<option :value="null" selected disabled>Select</option>
<option
v-for="option in options"
:key="option"
:value="option"
v-text="option"
></option>
</select>
...
data() {
return {
options: ['Option 1', 'Option 2', 'Option 3'],
dropdowns: [{ value: null }, { value: null }, { value: null }]
}
}
If you want all the values together you could create a computed property:
computed: {
dropdownValues() {
return this.dropdowns.map(d => d.selected)
}
}
Related
I am using https://dabernathy89.github.io/vue-query-builder/ Vue Query Builder. Now, I need to use custom-component type. Here is the code for the rules in the parent component:
rules: [
{
type: "text",
id: "url_regex",
label: "Url Regex",
},
{
type: "text",
id: "page_source",
label: "Page Source ",
},
{
type: "custom-component",
id: "page_dom_element",
label: "Page Dom Element",
operators: [],
component : PageDomElement,
},
],
Above you can see that, third rules contain custom-component type and the component is PageDomElement.
And this PageDomElement is look like this:
<template>
<div>
<input type="text" id="page_dom_element" class="form-control" placeholder="jQuery path"/>
<select name="" id="" class="form-control">
<option value="equals">equals</option>
<option value="does-not-equals">does not equals</option>
<option value="contains">contains</option>
<option value="does-not-contain">does not contain</option>
<option value="is-empty">is empty</option>
<option value="is-not-empty">is not empty</option>
<option value="begins-with">begins with</option>
<option value="end-with">end with</option>
</select>
<input type="text" class="form-control"/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
Now, my question is how can I get the this custom component fields value ?
I'm trying to apply a different colour (new color) for the default selected option "Please Select a Combo" and the other comboOptions "A", "B", "C", D" should be in color black.
I only want the disabled default option to be green, and all the other options to be black.
How do we do this? I've been trying to use conditional classes but it applies to all options and not just the first default one.
<select
v-model="comboSet"
class="combo-padding"
:class="{ 'new-color': comboSet !== null }"
>
<option value="" selected disabled hidden style="color: green">
Please pick a combo
</option>
<option
v-for="option in comboOptions"
placeholder="Please Select a Combo"
:value="option"
:key="option"
>
{{ option }}
</option>
</select>
data () {
comboOptions = ["A", "B", "C", D"]
}
.new-color {
color: green !important;
}
Thanks for the help!
Bearing in mind that select styling options are limited, you can apply classes to the option elements. Conditional styling can be applied like:
<option
v-for="(i, index) in items"
:class="{ steely: styleMe == 1, purple: styleMe != 1 }"
:key="index">
{{ i }}
</option>
The template is:
<template>
<div>
<h1>Select example</h1>
<select
:class="{ 'new-color': comboSet == 'Default option' }"
v-model="comboSet">
<option selected disabled class="new-color">Default option</option>
<option
v-for="(i, index) in items"
:class="{ steely: styleMe == 1, purple: styleMe != 1 }"
:key="index">
{{ i }}
</option>
</select>
<button #click.prevent="styleMe = !styleMe">Change</button>
</div>
</template>
With data that looks like:
data() {
return {
items: ["Option One", "Option Two", "Option Three"],
styleMe: false,
comboSet: "Default option",
}
}
The styles look like:
.new-color {
color: green;
}
.steely {
color: steelblue;
}
.purple {
color: purple;
}
I created a more full example with conditional classes here: code sandbox select example VueJs
Hope this make sense and answers the question.
I have a select with options created using a Vue.js v-for loop. This works fine but the issue I am having is taking and ID of the option and assigning that to my v-model
What's in my data property
mplans: [
{
name: 'silver',
id: 'silver-m-2019-07-16'
},
{
name: 'gold',
id: 'gold-m-2019-07-16'
},
],
My select
<select class="form-control" v-model="plan">
<option disabled hidden>Select A Plan</option>
<option v-for="plan in mplans">{{ plan.name }} - Monthly</option>
</select>
You can do this to get the ID from the selected option
<select class="form-control" v-model="plan">
<option disabled hidden value="">Select A Plan</option>
<option v-for="p in mplans" :value="p.id" :key="p.id">
{{ p.name }} - Monthly
</option>
</select>
Note: I've changed the v-for "plan" for "p", it can be ambiguous
I have a button 'Add Field' and when I click it, I show a select box with several predefined options.
Now, below this select box I want to display another select box if the value selected in the select field is equal to, let's say, 'Hello', otherwise display an input field but I am struggling to achieve this.
Right now, my code looks like this:
<div v-for="option in folder.salary.fields" :key="option.id">
<b-form-group label="Select field" label-for="salaryOptionField">
<select
v-model="folder.salary.fields.name"
value-field="id"
#change="onOptionSelected"
>
<option :value="null" disabled>Select type</option>
<option v-for="(type, key) in salaryFields" :value="key">
{{ salaryFields[key] }}
</option>
</select>
<template v-if="folder.salary.fields.name === 'Hello'">
<b-form-group label="Name" label-for="name">
<input type="text"
name="name"
v-model="folder.salary.benefits.a"
required/>
</b-form-group>
</template>
</b-form-group>
</div>
<b-btn #click="addNewSalaryField" variant="primary">Add Field</b-btn>
addNewSalaryField(){
this.folder.salary.fields.push({
name: '',
amount: ''
})
}
data() {
return {
folder: {
pages: [],
salary: {
fields: [],
benefits: []
}
}
}
}
Right now, if I select 'Hello' from the select field, nothing happens. Appreciate your help.
You can see my case below
My vue component is like this :
<template>
<select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" >
<option>Choose</option>
<option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
</select>
</template>
<script>
...
export default {
...
props: ['elementName', 'module'],
data() {
return {
selected: 'Choose'
};
},
...
};
</script>
The result is like this :
I don't select anything. I click button submit, the required not working. It not display the required
I try like this :
<option value="">Choose</option>
It works. But, when accessed first time, option choose not show
How can I solve this problem?
See their example: https://v2.vuejs.org/v2/guide/forms.html#Select
It doesn't display anything because you have: selected: 'Choose' but you have no option with value="Choose". (the value is the empty string, "Choose" is just the inner text of the option element).
Try this:
<template>
<select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" >
<option disabled value="">Choose</option>
<option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
</select>
</template>
<script>
...
export default {
...
props: ['elementName', 'module'],
data() {
return {
selected: ''
};
},
...
};
</script>