We Keep Coding

Loop data is not showing at first in my vue.js search feature

I have a search feature using Vue.Js. The code below works when clicking the search button. My concern is, all data does not appear at first, it appears only when I click search. What I want, data appears at the start. Is there anything missing in the code I created? please help me solving this problem
<template>
<div>
<select v-model="selectedLevel">
<option value="" disabled selected hidden>Level</option>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
<select v-model="selectedTime">
<option value="" disabled selected hidden>Time</option>
<option value="30">30 Min</option>
<option value="60">60 Min</option>
</select>
<select v-model="selectedType">
<option value="" disabled selected hidden>Type</option>
<option value="cycling">Cycling</option>
<option value="boxing">Boxing</option>
</select>
<button #click="search">Search</button>
<div class="list-item" v-for="item in searchResult">
<div class="card">
<p>Class Name: {{ item.type }}</p>
<p>Level: {{ item.level }}</p>
<p>Time: {{ item.time }}</p>
</div>
</div>
</div>
</template>
export default {
data() {
return {
selectedType: '',
selectedTime: '',
selectedLevel: '',
items: [{
type: 'cycling',
time: '30',
level: 'beginner'
},
{
type: 'boxing',
time: '60',
level: 'beginner'
},
{
type: 'cycling',
time: '60',
level: 'advanced'
},
{
type: 'boxing',
time: '30',
level: 'advanced'
}
],
searchResult: [],
}
},
methods: {
search() {
let filterType = this.selectedType,
filterTime = this.selectedTime,
filterLevel = this.selectedLevel
this.searchResult = this.items.filter(function(item) {
let filtered = true
if (filterType && filterType.length > 0) {
filtered = item.type == filterType
}
if (filtered) {
if (filterTime && filterTime.length > 0) {
filtered = item.time == filterTime
}
}
if (filtered) {
if (filterLevel && filterLevel.length > 0) {
filtered = item.level == filterLevel
}
}
return filtered
})
}
}
}

You need to run the search method once the component is mounted because now runs only when you click the button, try the below:
inside export default add the below:
data() {
return {
selectedType: '',
selectedTime: '',
selectedLevel: '',
items: [{
type: 'cycling',
time: '30',
level: 'beginner'
},
{
type: 'boxing',
time: '60',
level: 'beginner'
},
{
type: 'cycling',
time: '60',
level: 'advanced'
},
{
type: 'boxing',
time: '30',
level: 'advanced'
}
],
searchResult: [],
}
},
mounted(){
this.search();
}
Just add the mounted part

When the page loads this.searchResult is empty array.
You search method is called only when you click search button. and then filtered items are assigned to this.searchResult
Simple solution would be to manually call the search method on component mounted or created hook.
Better solution would be to rewrite your search logic using pipe and computed propeties

Vue JS set first item in a populated select to be selected with v-model

I have tricky challenge with vuejs, I want to have two select fields. the first one should select fruits for example, and the second should list all fruits. If I select vegetable from the first select field, the second select field should list all vegetable.
I stumble and find similar stuff online but I don't know how to make first item in the second select field selected.
anytime I select fruits, the first item on the list in second select first should be selected as default, and if I select vegetable, the first item in the second select field should be selected as default.
pls help me check the code here: https://jsfiddle.net/aj6g87dh/1/
new Vue({
el: '#test',
data: {
category: 'fruits',
list: '',
optionsData: {
fruits: [
{ text: 'Orange', value: 'orange' },
{ text: 'Banane', value: 'banana' },
],
vegetables: [
{ text: 'Brocolis', value: 'brocolis' },
{ text: 'Radish', value: 'radish' },
]
}
},
computed: {
options: function() {
let options = ''
switch (this.category) {
case 'fruits':
options = this.optionsData.fruits
break;
case 'vegetables':
options = this.optionsData.vegetables
break;
default:
options = this.optionsData.fruits
}
return options
}
},
methods: {
onChange: function() {
this.options = this.options
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<div id="test">
<select v-model="category" v-on:change="onChange" id="select1">
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<select id="select2" v-model="list">
<option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option>
</select>
<span>{{ }}</span>
</div>

You can remove onChange method and add a watch property. This way you can handle changing logic there.
Also, you can simplify options retrieval to one line.
new Vue({
el: '#test',
data: {
category: 'fruits',
list: '',
optionsData: {
fruits: [{
text: 'Orange',
value: 'orange'
},
{
text: 'Banane',
value: 'banana'
},
],
vegetables: [{
text: 'Brocolis',
value: 'brocolis'
},
{
text: 'Radish',
value: 'radish'
},
]
}
},
computed: {
options: function() {
return this.optionsData[this.category]
}
},
watch: {
category: {
handler: function(newVal) {
this.list = this.optionsData[newVal][0].value;
},
immediate: true
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
<select v-model="category" id="select1">
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<select id="select2" v-model="list">
<option v-for="(option, i) in options" v-bind:value="option.value"> {{ option.text }} </option>
</select>
<span>{{ }}</span>
</div>

Getting item properties from a dropdown in Vue.Js

I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})

Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>

How to use two value on vue.js 2?

I try to my component like this :
<script>
export default {
template: '\
<select class="form-control" v-on:change="search">\
<option v-for="option in options" v-bind:value="'+option.id+'|'+option.name+'">{{ option.name }}</option>\
</select>',
mounted() {
...
},
...
};
</script>
I separate them using separator |
So, I'll be using a split to get the id and the name
I try like that, but there exist error :
Uncaught ReferenceError: option is not defined
How can I solve it?

Here is what you want:
new Vue({
el: '#demo',
data: {
selected: '',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value+'|'+option.text">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

Dynamically change select input options in vuejs 2

How to change dynamically the options in a select dropdown v-model ?
I have 2 select inputs, one should change according to the others.
For example, if i select "fruits" the select display the fruits, if i select "vegetables" it displays the vegetables.

I don't use Vuejs, but after looking at the documentation:
var TypesArr = {
Fruit: [{ text: 'Apple', value: 'Apple' }, { text: 'Orange', value: 'Orange' }, { text: 'Mango', value: 'Mango' }],
Meat: [{ text: 'Steak', value: 'Steak' }, { text: 'Pork', value: 'Pork' }]
}
var selectTwo = new Vue({
el: '#select2',
data: {
selected: TypesArr['Fruit'][0],
options: TypesArr['Fruit']
},
methods: {
update: function (value)
{
this.options = TypesArr[value]
}
}
})
new Vue({
el: '#select1',
data: {
selected: 'Fruit',
options: [ { text: 'Fruit', value: 'Fruit' }, { text: 'Meat', value: 'Meat' } ]
},
methods: {
onChange: function (event)
{
selectTwo.update(event.srcElement.value)
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<select v-on:change="onChange" id="select1">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<select id="select2">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>

The other answers are not really 'Vue' answers.
How you handle this depends on what you want to do with the select box. I'm assuming you'll to handle the input on a form.
Two options:
Use a Computed property
Use v-if to show different select boxes. This would be ideal if each select box has a different v-model
Computed Property
<template>
<div class="container">
<select id="firstInput" v-model="selected">
<option v-for="option in firstInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInput" v-model="secondInputSelected">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
</div> <!-- /container -->
</template>
<script>
export default {
computed: {
secondInputOptions(){
return this.selected === 'fruit' ? this.fruit : this.vegetables
}
},
data () {
return {
fruit: ['apple', 'banana', 'orange'],
vegetables: ['carrot', 'beet', 'celery'],
firstInputOptions: ['fruit', 'vegetables']
selected: 'fruit',
secondInputSelected: ''
}
},
}
</script>
Conditional Rendering
<template>
<div class="container">
<select id="firstInput" v-model="selected">
<option v-for="option in firstInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInputFruit" v-model="selected" v-if="selected == 'fruit'">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInputVegetables" v-model="vegetableSelected" v-else-if="selected == 'vegetables'">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
</div> <!-- /container -->
</template>
<script>
export default {
data () {
return {
fruits: ['apple', 'banana', 'orange'],
fruitSelected: '',
vegetables: ['carrot', 'beet', 'celery'],
vegetableSelected: '',
firstInputOptions: ['fruit', 'vegetables']
selected: 'fruit'
}
},
}
</script>

Using pure javascript
var typesArr = {fruit: ['Apple', 'Orange', 'Mango'], meat: ['Steak', 'Pork']}
function changeContext(value)
{
if (typesArr.hasOwnProperty(value)) {
var out = ''
for (var i = 0; i < typesArr[value].length; i++) {
out += '<option value="' + typesArr[value][i] + '">' + typesArr[value][i] + '</option>'
}
document.getElementById('select2').innerHTML = out
}
}
changeContext('fruit')
<select onchange="changeContext(this.value)">
<option value="fruit">Fruit</option>
<option value="meat">Meat</option>
</select>
<select id="select2"></select>