I'm using vue js for my application in select option input..I need to set default value should be selected in the drop down and while on change i would like to call two functions ..
I'm new to vue js..
My Code :
var listingVue = new Vue({
el: '#mountain',
data:{
formVariables: {
country_id: '',
mountain_id: '',
peak_id: ''
},
countrylist:[],
mountainlist:[],
},
ready: function() {
var datas = this.formVariables;
this.getCountry();
},
methods: {
getCountry: function()
{
this.$http.get(baseurl+'/api/v1/device/getCountry',function(response)
{
this.$set('countrylist',response.result);
//alert(jQuery('#country_id').val());
});
},
getMountain: function(country_id)
{
var datas = this.formVariables;
datas.$set('country_id', jQuery('#country_id').val() );
postparemeters = {country_id:datas.country_id};
this.$http.post(baseurl+'/api/v1/site/getMountain',postparemeters,function(response)
{
if(response.result)
this.$set('mountainlist',response.result);
else
this.$set('mountainlist','');
});
},
});
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
v-on="change:getMountain(formVariables.country_id);">
<option
v-repeat = "country: countrylist"
value="#{{country.id}}" >
#{{country.name}}
</option>
</select>
With vue 2, the provided answer won't work that well. I had the same problem and the vue documentation isn't that clear concerning <select>. The only way I found for <select> tags to work properly, was this (when talking of the question):
<select v-model="formVariables.country_id">
<option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>
I assume, that the #-sign in #{{...}} was due to blade, it should not be necessary when not using blade.
In VueJS 2 you can bind selected to the default value you want. For example:
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
v-on:change="getMountain(formVariables.country_id);">
<option
v-for = "country in countrylist"
:selected="country.id == 1"
:value="country.id" >
{{country.name}}
</option>
</select>
So, during the iteration of the countryList, the country with the id 1 will be selected because country.id == 1 will be true which means selected="true".
UPDATED:
As Mikee suggested, instead of v-on="change:getMountain(formVariables.country_id);" there is a new way to for binding events. There is also a short form #change="getMountain(formVariables.country_id);"
You should use the 'options' attribute in place of trying to v-repeat <option></option>:
VM
data: {
countryList: [
{ text:'United States',value:'US' },
{ text:'Canada',value:'CA' }
]
},
watch: {
'formVariables.country_id': function() {
// do any number of things on 'change'
}
}
HTML
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
options="countryList">
</select>
You can use select in this way. Remember to use array in v-for.
<select v-model="album.primary_artist">
<option v-for="i in artistList" :key="i.id" :value="i.name">
{{ i.name }}
</option>
</select>
You can use this way.
<select v-model="userData.categoryId" class="input mb-3">
<option disabled value="null">Kategori</option>
<option
v-for="category in categoryList"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>
export default {
data() {
return {
categoryList: [],
userData: {
title: null,
categoryId: null,
},
};
},
The important thing here is what the categoryId value is, the default option value should be that.
categoryId: null,
<option disabled value="null">Kategori</option>
Here we use categoryId as value in v-model and initialize it with null. Value must be null in default option.
<select v-model="userData.categoryId" class="input mb-3">
Related
I am looking for a way to get a value out of a v-for loop. Can anyone help me with this?
I have the following code:
Select Country:
<select #change="selectCountryStats(country.code)">
<option
v-for="country in everyCountry"
:key="country.name"
value="country.name"
>
{{ country.name }}
</option>
</select>
and in #change I would like to get the value of country.code, but this value is first known, when the v-for loop is triggered, which is not the case.
Any solution for this problem will be appreaciated.
You can't use the v-for's iterator outside of the v-for loop because it's out of scope.
For the change-event handler to receive the country code, you'd have to change the <option>.value bindings from country.name to country.code:
<option :value="country.code">
For inline event handlers, the event parameter is stored in a special $event variable. And since the change event's target is the <select>, you could access the new value (the country code of the selection) in the change-event handler via $event.target.value:
<select #change="selectCountryStats($event.target.value)">
new Vue({
el: '#app',
data: () => ({
everyCountry: [
{
name: 'United States',
code: 'US'
},
{
name: 'Canada',
code: 'CA'
},
]
}),
methods: {
selectCountryStats(e) {
console.log(e)
}
}
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<div id="app">
<select #change="selectCountryStats($event.target.value)">
<option
v-for="country in everyCountry"
:key="country.name"
:value="country.code"
>
{{ country.name }}
</option>
</select>
</div>
i have the object like this;
fluit:[
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
]
And code in vuejs like this
<select >
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select"{{item.name</option>
</select>
and what i get from this tag it's like this
and what i want to ask is how can i get the value as the id of each option. like a when i select Mango and the value is 003.
if you know how to solve this please help me.
thank you.
For Your Solution use this -
<template>
<select name="itemType" v-model="itemType" #change="onChange()" class="form-control">
<option value="001">Apple</option>
<option value="002">Banana</option>
</select>
</template>
<script>
export default {
data() {
return {
itemType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.itemType)
}
}
}
</script>
My advice use vuetify (v-select)component with vue for better performance.
<template>
<v-select
v-model="select"
:items="fluit"
item-text="id"
item-value="name"
label="Select"
#input="doSomething"
return-object/>
</template>
<script>
export default {
data () {
return {
select: { id:'005', name:"papaya" },
items: [
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
],
}
method:{
doSomething(){
console.log(this.select)
}
}
},
}
</script>
I Hope it will help!
add a v-model to your select and that is it:
<select v-model="selectedItem">
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select">
{{item.name}}
</option>
</select>
now selectedItem will contain the value of the fruit, working example :
https://codesandbox.io/s/fruit-select-vs709
I have a cascading select (two part select) where the options in the second dropdown are determined by the value of the first dropdown. I do this by having a computed property which is based off of the first select. This then feeds the options into the second select. This mostly works fine.
The problem I'm having is if I have selected an option in the second select (which through v-model sets the value of the bound variable in Vue), and then I change the value of the first select. The options for the second select then update, and in that second select I appear to be selected to the empty option. However, the bound variable still has the previously selected value. I'm assuming this is because updating the option values for the second select doesn't actually trigger an input or change event so v-model doesn't respond to anything. I suppose I could fix this with a watcher, but I was hoping for a more elegant solution.
Coded example is here: https://codepen.io/Slotheroo/pen/ajwNKO/
JS/Vue:
new Vue({
el: '#app',
data: {
selectedFruit: null,
selectedVariety: null,
fruits: {
"apples": [
{
name: "honeycrisp",
madeBy: "applebees",
},
{
name: "macintosh",
madeBy: "the steves",
},
{
name: "gala",
madeBy: "ac/dc",
},
{
name: "pink lady",
madeBy: "Alecia Beth Moore",
},
],
"pears": [
{
name: "d'anjou",
madeBy: "Maya D'Anjoulou",
},
{
name: "bartlett",
madeBy: "Anton Yelchin",
}
],
},
},
computed: {
fruitVarieties: function() {
return this.fruits[this.selectedFruit]
}
},
});
HTML:
<div id="app">
<div>
<select v-model="selectedFruit">
<option value=""></option>
<option v-for="fruitName in Object.keys(fruits)" :value ="fruitName">{{fruitName}}</option>
</select>
</div>
<select v-model="selectedVariety">
<option value=""></option>
<option v-for="fruitVariety in fruitVarieties" :value="fruitVariety">{{ fruitVariety.name }}</option>
</select>
<div>
</div>
<p>Selected variety: {{ selectedVariety }}</p>
</div>
Steps to reproduce:
Select 'apples' in the first select
Select 'honeycrisp' in the second select
Select 'pears' or 'blank' in the first select
Hoped for result
selectedVariety returns to null
Actual result
selectedVariety still equals honeycrisp
I'd add an on-change handler to the first <select> to empty the selectedVariety when the selection changes...
<select v-model="selectedFruit" #change="selectedVariety = null">
https://codepen.io/anon/pen/JByEwy
Another option would be to add a watch on selectedFruit but Vue generally recommends using event handlers.
if you're using version 3.0.0, there is some feature with :reset-on-options-change='true'
e.g
<v-select required :options="filterKaryawan.unit.options" :reset-on-options-change='true' v-model="filterKaryawan.unit.selected" placeholder="placeholder" >
<template #search="{attributes, events}">
<input
class="vs__search"
v-bind="attributes"
v-on="events"
:required="filterKaryawan.unit.selected"
/>
</template>
</v-select>
The computed propertive is actually a watcher. So just put the reset value code in it.
computed: {
fruitVarieties: function() {
this.selectedVariety = null;
return this.fruits[this.selectedFruit]
}
}
I'm using Vue 2 for a small blog project. I have a separate component for post's form and one of the form inputs is a select (for post's category). The select gets populated after the categories are fetched from DB. The component also gets a post object from parent component, that is also fetched from the db (see props: ['post']).
Here's the code:
// HTML
...
<select class="form-control" v-model="post.category_id">
<option
v-for="cat in categories"
v-bind:value="cat.id">
{{ cat.name }}
</option>
</select>
...
// JS
module.exports = {
props: ['post', 'url'],
name: 'postForm',
created: function() {
this.syncCats()
},
methods: {
syncCats: function() {
this.$http.get("/api/categories")
.then(function(res) {
this.categories = res.data
})
}
},
data: function() {
return {
categories: {}
}
}
}
The problem I'm having is that none of the options is selected by default. It looks like this. But when I open the select I see both categories from my db like this.
I want to select the correct (post.category_id == cat.id) value by default. How would I do this?
I've tried <select ... :v-bind:selected="post.category_id == cat.id"> but same happened.
Edit
Okay so now I've tried dumping both post.category_id and cat.id like this:
<div class="form-group">
<label>Category</label>
<select class="form-control" v-model="post.category_id">
<option
v-for="cat in categories"
:value="cat.id"
:selected="cat.id == post.category_id">
{{ cat.name }} {{ cat.id }} {{ post.category_id }}
</option>
</select>
</div>
And the result before I select any option is this - only cat.id gets printed, post.category_id does not. However after I select some option I post.category_id appears as well, like this. Notice how the "1" at the end only appears in 2nd screenshot, after I've selected one of the options, which is the {{ post.category_id }}.
This implies that the post is loaded after the categories and that I should somehow reinitialize the select after it's loaded. How would I do this? For reference this is the parent component that fetches the post.
<template>
<span id="home">
<postForm :post="post" :url="url"></postForm>
</span>
</template>
<script>
var postForm = require('../forms/post.vue')
module.exports = {
name: 'postEdit',
created: function() {
this.$http.get('api/posts/slug/' + this.$route.params.slug)
.then(function(response) {
if(response.status == 200) {
this.post = response.data
this.url = "/api/posts/slug/" + response.data.slug
}
})
},
data: function() {
return {
post: {},
url: ""
}
},
components: {
postForm
}
}
</script>
You'll need to set the selected attribute on the appropriate <option> and adhere to Vue's one-way data flow paradigm.
You can even add some extra usability sugar by disabling the <select> until both the post and categories are loaded...
<select class="form-control"
:disabled="!(post.category_id && categories.length)"
#input="setCategoryId($event.target.value)">
<option v-for="cat in categories"
:value="cat.id"
:selected="cat.id == post.category_id">
{{cat.name}}
</option>
</select>
and
methods: {
setCategoryId(categoryId) {
this.$emit('input', parseInt(categoryId))
}
}
Then, in the Vue instance / component that includes the above one, simply use
<post-form :post="post" :url="url"
v-model="post.category_id"></post-form>
See Components - Form Input Components using Custom Events for more information.
JSFiddle demo ~ https://jsfiddle.net/1oqjojjx/267/
FYI, I'd also initialise categories to an array, not an object...
data () {
return {
categories: []
}
}
You should be able to do something like following:
methods: {
syncCats: function() {
this.$http.get("/api/categories")
.then(function(res) {
this.categories = res.data
if(!this.post.category_id) {
this.post.category_id = this.categories[0].id
}
})
}
},
I'm using Vue.js with the Mininmalect HTML select plugin to display a list of countries by name and value (value being the 2 digit country code).
I've got it to work when using the plugin to select a country. It's adds the value to the selected state.
What I can't work out is how display a value/country when there is already one in state (i.e. from the database when the page loads).
This is what I have:
<template>
<select name="country" v-model="country">
<option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selected: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
$('select').minimalect({
onchange: function(value) {
vm.selected = value;
}
});
}
};
</script>
I'm struggling to get the select attribute to appear, i.e. <option value="GB" selected>United Kingdom</option> so there is a default when the page is loaded.
You've got v-model="country", so if you just set the value of country to the database value, the select will automatically be set to that value.
data() {
return {
country: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
$('select').minimalect({
onchange: function(value) {
vm.country = value;
},
afterinit: function() {
$('select').val(vm.country).change();
}
});
}
Change your v-model with selected. And I think your problem is a performance problem. Add a setTimeout for your function.
<template>
<select name="country" v-model="selected">
<option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selected: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
setTimeout(function(){
$('select').minimalect({
onchange: function(value) {
vm.selected = value;
}
});
});
}
};
</script>