I'm having an array of objects. I wanted to change value to the object property by a select box.
HTML
<div id="app">
{{ message }}<br><br>
<select v-modal="items[0].val">
<option value="newjs">New js</option>
<option value="vannilajs">Vannila js</option>
</select>
<br>
ITEM 0 = {{items[0].val }}
<br>
ITEM 1 = {{items[1].val }}
</div>
JS
new Vue({
el:'#app',
data: {
message: 'testing',
items: [{val:'VUE'},{val: 'REACT'}] //intial two items
}
});
When select box changes I wanted to change the value of ITEM 0 to Selected Value.
Just for testing purpose right now I'm trying to access 0th object from the array. This select box will be in v-for loop for multiple select box.
FIDDLE
You can't assign variables to objects and arrays that easily in Vue.js
<div id="app">
<select #input="change">
<option value="newjs">New js</option>
<option value="vannilajs">Vannila js</option>
</select>
</div>
<script>
new Vue({
el:'#app',
data:{
items:[{val:'VUE'},{val:'REACT'}]
},
methods: {
change(element) {
this.$set(this.items[0], 'val', element);
}
}
});
</script>
Vue can only migically refresh values changed by reference (message = 'hey'), or by object reference (object.message = 'hey') but only if that reference was in data() in create time.
new Vue({
data: {
object: {first:0},
array: [1,2,3]
},
methods: {
change() {
object.first = 2; // works
object.second = 3; // doesn't work
array[0] = 2; // works for 0,1,2
array[4] = 3; // doesn't work
}
}
For the object.second and array[3] you need to use $set().
Ok i misread your question. You do have a spelling mistake but you also need an intermediary variable to hold the value of the drop down
<div id="app">
{{ message }}<br><br>
<select v-model="selectedValue">
<option value="newjs">New js</option>
<option value="vannilajs">Vannila js</option>
</select>
<br>
ITEM 0 = {{selectedValue }}
<br>
ITEM 1 = {{items[1].val }}
</div>
new Vue({
el:'#app',
data: {
message: 'testing',
selectedValue: 'VUE',
items: [{val:'VUE'},{val: 'REACT'}] //intial two items
}
});
Related
I have two form fields retrieval-method and source-url, where the later depends on the value of the former. Specifically the text box source-url should be disabled for particular values of retrieval-method. I can achieve this fairly simply as follows:
https://jsfiddle.net/o5mzhg3y/
<div id="app">
<select name="retrieval-method" v-model="retrieval_method">
<option value="">Choose a method</option>
<option value="1">Upload</option>
<option value="2">Download (Periodic)</option>
<option value="3">Download (API Triggered)</option>
</select>
<input type="text" name="source-url" :disabled="!(retrieval_method>1)">
</div>
<script>
new Vue({
el: '#app',
data: {
retrieval_method: false,
source_url: ''
}
})
</script>
However I would like to be able to also reset the fields value to an empty string when the retrieval method changes to something that causes the input to be disabled. But I can't wrap my mind around how to do this. Perhaps I need to implement a method?
Ideally the value would not be forgotten so that if the user changes retrieval-method back to a value that requires a source url the value is reinserted into the text input.
Well you need to do a few things. You can add a watcher to your retrieval_method property. Listen for changes when value changed you save your source_url into a backup field when disable condition is true. And in reverse you read back from your backup filed to your source_url. You should also change your input binding to a v-model binding in order to reflect changes.
new Vue({
el: '#app',
data: {
retrieval_method: false,
source_url: '',
backupUrl: ''
},
computed: {
disableUrl: function() {
return this.retrieval_method <= 1;
}
},
watch: {
// whenever question changes, this function will run
retrieval_method: function(newValue, oldValue) {
if (newValue <= 1) {
this.backupUrl = this.source_url;
this.source_url = '';
} else if (this.backupUrl) {
this.source_url = this.backupUrl;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<select name="retrieval-method" v-model="retrieval_method">
<option value="">Choose a method</option>
<option value="1">Upload</option>
<option value="2">Download (Periodic)</option>
<option value="3">Dowload (API Triggered)</option>
</select>
<input type="text" v-model="source_url" :disabled="disableUrl" />
</div>
So I ended up figuring it out by binding a method to the change event
https://jsfiddle.net/o5mzhg3y/7/
<div id="app">
<select name="retrieval-method" v-model="retrieval_method" v-on:change="retrieval_method_changed">
<option value="">Choose a method</option>
<option value="1">Upload</option>
<option value="2">Download (Periodic)</option>
<option value="3">Dowload (API Triggered)</option>
</select>
<input type="text" name="source-url" :disabled="source_disabled" v-model="source_url">
</div>
<script>
new Vue({
el: '#app',
data: {
retrieval_method: '',
source_disabled: true,
source_url: '',
old_source_url: '',
},
methods: {
retrieval_method_changed: function (event) {
const old_source_disabled = this.source_disabled
this.source_disabled = !(this.retrieval_method>1)
if( old_source_disabled != this.source_disabled) {
if(this.source_disabled) {
this.old_source_url = this.source_url
this.source_url = ''
} else {
this.source_url = this.old_source_url
this.old_source_url = ''
}
}
}
}
})
</script>
I'm going to leave the question open though, in case someone comes up with a cleaner way to do what I wanted
I'm using html and laravel to build select box options in a foreach loop
This works and populates with ID as value and name as the option. What I want, and can't quite figure out here, is how to take my function when I call it and get the id and value as separate vue options for a post axios call I'm going to make.
So when I select the option and submit the form to call the function, how can I get the ID as one prop and the name as another?
<select>
#foreach($details as $detail)
<option value="{{$detail->id}}">{{$detail->name}}</option>
#endforeach
</select>
new Vue({
data: {
detailID: [''],
detailName: ['']
},
methods: {
let data = {
detailID: this.detailID,
detailName: this.detailName
};
}
})
Here is a code example just using vue.js
Template
<div id="app">
<select v-model="selectedDetailId">
<option v-for="detail in details" v-bind:value="detail.id">
{{ detail.name }}
</option>
</select>
</div>
Script
new Vue({
el: '#app',
data: {
selectedDetailId: null,
details: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
},
methods:{
post(){
//your selected Id is this.selectedDetailId
}
}
})
You can find more details and examples in the official Vue.js docs.
https://v2.vuejs.org/v2/guide/forms.html#Value-Bindings
Use v-model to bind the selection to your component data. SeeForm input bindings:
new Vue({
data: {
detailID: ""
},
// now you can access the id with this.detailID in your post request
})
<select v-model="detailID">
#foreach($details as $detail)
<option value="{{$detail->id}}">{{$detail->name}}</option>
#endforeach
</select>
And if you need both id and name, one work around could be:
new Vue({
data: {
detail: ""
},
// now you can access the id & name with this.detail.split(',') in your post request
})
<select v-model="detail">
#foreach($details as $detail)
<option value="{{$detail->id.','.$detail->name}}">{{$detail->name}}</option>
#endforeach
</select>
You would need to set a v-model to your select element and bind the entire object to each option element instead of just the id like you are doing in your example.
Here is a codepen with a simple example.
I want to change the second select list according to the selected value in the first one. It worked when i did two Vue instances for each select, but i wanted to do a small app so its all a bit cleaner.
The types JSON array needs to be outside the Vue JS. You can see it in the fiddle.
Somehow i just dont get how to update the second selectlist.
Before i did something like this and it worked perfectly:
// methods of first select (category)
methods: {
update: function (value)
this.options = types[value]
}
}
...
// methods of second select (typselect)
methods: {
onChange(event) {
typselect.update(event.srcElement.value)
}
}
The app:
<div id="app">
<select v-model="category" v-on:change="onChange">
<option>Choose</option>
<option value="5">type1</option>
<option value="6">type2</option>
<option value="11">type3</option>
</select>
<select id="typselect">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
</div>
So i switched that for something like this:
new Vue({
el: '#app',
data: {
category: '5'
},
computed: {
options: function(event) {
console.log('should be called on change');
let options = ''
options = 1;
// options = types[event.srcElement.value]; // this would be so easy...
return options
}
},
methods: {
onChange: function(e) {
console.log(event.srcElement.value);
this.options = this.options
}
}
})
But i just don't get how to get the second selectlist updated.
Here come a fiddle:
https://jsfiddle.net/Honkoman/g9g5uukr/2/
Your computed should look like this.
computed: {
options: function(event) {
return types[this.category]
}
},
Updated fiddle.
I'm in very beginning stage learning Vue.js and encountered problem I can't figure out right now. So I have 1 select field:
data: {
list: {
'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ]
}
}
Then I populating first select field like this:
<select v-model="firstOptions" v-on:change="onChange">
<option v-for="(item, index) in list">{{ index }}</option>
</select>
At this point everything is fine, but how to populate another select field based on first select? I need to access size and price.
I'm think this should be done here:
methods: {
onChange: function() {
// get options for second select field
}
}
I'm assuming here in your data structure, list, that the value of each property defines the options you will use in the second select. The key here is the model for the first select drives the options for the second.
<option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>
I'm not sure how exactly you want your text and values laid out in the first or second selects, but here is an example.
new Vue({
el:"#app",
data: {
firstOption: null,
secondOption: null,
list: {
'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ],
'Option 2': [{size:'3', prize:'8'}]
}
}
})
and in your template
<div id="app">
<select v-model="firstOption">
<option v-for="(item, index) in list">{{ index }}</option>
</select>
<select v-model="secondOption" v-if="firstOption">
<option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>
</select>
</div>
Example in codepen.
Assume I have this :
<select class="form-control" name="gateway">
<option data-type="typeA" value="1">Test String</option>
<option data-type="typeB" value="2">Test String</option>
<option data-type="typeC" value="3">Test String</option>
</select>
<span>#{{ typeMapper(data-type) }}</span>
Here is my Vue.js script :
const app = new Vue({
el: '#vue-app',
data: {},
methods: {
typeMapper: function (type) {
var array = {
'typeA':'You selected Type A',
'typeB':'You selected Type B',
'typeC':'You selected Type C',
};
return array[type];
}
}
});
Now how can I get data-type values in Vue.js ?
I want to pass selected option data-type value to Vue.js typeMapper method and show the result in the span tag.
I don't know how to pass data-type value to Vue.js !
P.S:
I'm using Vue.js 2
Your data isn't a true javascript array so I used the Object.keys function to grab the key names. Here's a quick way of doing what you're looking for:
<div id="app">
<select class="form-control" name="gateway">
<option v-for="(key,index) in Object.keys(array)" :value="index+1" :data-type="key">
{{ array[key]}}
</option>
</select>
</div>
And the Vue code:
new Vue({
el: '#app',
data: {
array: {
'typeA': 'You selected Type A',
'typeB': 'You selected Type B',
'typeC': 'You selected Type C',
}
}
});
Here's a working fiddle.
I have no clue as to why you'd want to gather data sets from a given html5 structure. Since you'd usually want to get that trough ajax calls or set the select options trough some other component or whatever.
If you however want to get the elements given from a html structure you'd do something like this.
codepen
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-app">
<select class="form-control" v-on:change="typeMapper">
<option data-type="" value="">Select Type</option>
<option data-type="typeA" value="1">typeA</option>
<option data-type="typeB" value="2">typeB</option>
<option data-type="typeC" value="3">typeC</option>
</select>
<span>{{ gateway }}</span>
</div>
JS
const app = new Vue({
el: '#vue-app',
data: {
gateway: "",
},
methods: {
typeMapper: function (event) {
this.gateway = event.target[event.target.value].dataset.type;
}
}
});
This is by far from optimal or a cross browser variant. If I were you I'd scrap this approach.