I have a mock data like this :
export const CHARACTERS: any[] =
[
{
name: 'Earl of Lemongrab',
age: 'Unknown',
species: 'Lemon Candy',
occupation: 'Earl, Heir to the Candy Kingdom Throne'
},
{
name: 'Bonnibel Bubblegum',
age: '19',
species: 'Gum Person',
occupation: 'Returned Ruler of the Candy Kingdom'
},
{
name: 'Phoebe',
age: '16',
species: 'Flame Person',
occupation: 'Ruler of the Fire Kingdom'
}
I have taken this data and displaying it on a table. Now i want to display all this data inside a drop down based on column names.
I am using below code but its not displaying properly ;
<div class = "two">
<select [(ngModel)]="searchText" name="char[column]" placeholder="select">
<option
*ngFor="let char of characters"
*ngFor="let column of columns"
[ngValue]="char[column]">{{char[column]}}</option>
</select>
</div>
I have also tried below code but it gives me an error saying that name is not a know property of the column. Although my column has four strings like ["name" , "age" , "species" , "gender"]
<div class = "two">
<select [(ngModel)]="searchText" name="column" placeholder="select">
<option
*ngFor="let column of columns"
value="column.name">{{column.name}}</option>
</select>
</div>
<div class = "two">
<select [(ngModel)]="searchText" name="char[column]" placeholder="select">
<option
*ngFor="column of columns"
Value="char[column.name]">{{char[column.name]}}</option>
</select>
</div>
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 am trying something different using vuejs, but i want to instead replace it with the nested array data instead of the selected text. As you can see, the selectedChar is displaying the name. Displaying the name there is fine, but in reality i would like to get the value of subjects there if that name is selected in the dropdown
new Vue({
el: "#app",
data: {
todos: [
{ Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
{ Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},
],
selectedChar:'null'
},
methods: {
changeZ (event) {
this.selectedChar = event.target.options[event.target.options.selectedIndex].text
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<select id="dept"class="form-control" #change="changeZ($event)" style="width: 210px;">
<option value="Select a Department" selected disabled>select a character:</option>
<option v-for="t in todos" :value="todos.id" :key="todos.id">{{ t.Name }}</option>
</select>
<p><span>You Selected: {{ selectedChar }}</span></p>
instead. thanks!
You should really be utilizing v-model to bind the value of the <select> to a data property. The Vue docs specifically have a subsection on binding objects to <select> inputs. When you bind the whole object value you can then display any property of that object.
<select
id="dept"
class="form-control"
v-model="selection"
style="width: 210px"
>
<option v-for="t in todos" :value="t" :key="t.id">
{{ t.Name }}
</option>
</select>
<p>
<span>You Selected: {{ selection.subjects }}</span>
</p>
data: {
todos: [
{ Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
{ Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},
],
selection: {}
}
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.
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)
}
}
I am trying to make a vueapp that sets a property when the user clicks on an option tag. I'm trying to use v-on:click but it hasn't worked. Any ideas?
<div v-show="loggedin==1" class="searchBy">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext" v-on:click="displayName=display.name">{{display.name}}</option>
</select>
</div>
You can retrieve the option on the change event of select:
new Vue({
el: "#app",
data() {
return {
displays: [{ name: "Display1", shapetext: "1" }, { name: "Display2", shapetext: "2" }, { name: "Display3", shapetext: "3" }],
selectedDisplayShapeText: '',
displayName: ''
}
},
methods: {
getDisplayName(e){
let value = e.target.value
let display = this.displays.find(d => d.shapetext == value)
this.displayName = display.name
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText" v-on:change="getDisplayName($event)">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext">{{display.name}}</option>
</select>
<p>Display selected: {{ displayName }}</p>
</div>
You can bind the value of a select option in Vue to a complex expression (in this case an object).
Instead of binding your selected option to a property of the display object, just bind it to the display object itself. Then, whenever you need one of the properties of the selected display, you can just reference them from the selected display.
Here is an example.
console.clear()
new Vue({
el: "#app",
data:{
displays: [
{shapetext: "shape text 1", name: "display one"},
{shapetext: "shape text 2", name: "display two"},
{shapetext: "shape text 3", name: "display three"},
],
selectedDisplay: {}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<h2>Selected Display</h2>
<select v-model="selectedDisplay">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display" >{{display.name}}</option>
</select>
<hr>
Selected Display shapetext: {{selectedDisplay.shapetext}} <br>
Selected Display name: {{selectedDisplay.name}}
</div>