I want to initialize one variable with another variable in Vue js
Here I want to initialize 'multiple' variable with 'select' variable
<div id="myapp">
<select v-model="select">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected {{select}}</span>
<hr>
<select v-model="multiple" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Multiple Selected :{{ multiple | JSON}}</span>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script>
var vm=new Vue({
el:'#myapp',
data:{
select:'B',
multiple:select
}
})
</script>`
Here I get an error like:
Uncaught ReferenceError: select is not defined
You can't access data properties like this in the data() method.
If you want to do this (though it seems a bit useless in this example), you will have to define a variable outside, and then reference it in data()
<script>
var select = 'B'
var vm=new Vue({
el:'#myapp',
data:{
select: select,
multiple:select
}
})
</script>`
Related
Is there a way to do a checkbox inside select option vue?
Right now I have the following code:
<select required>
<option v-for=“item in items” :key=“item.id” value=item.id>{{item.name}}</option>
</select>
I need to make it possible to choose several options while selecting. Is there a way to do so?
This won't create checkboxes, but you could create a <select> that allows multiple choices by using the multiple attribute:
new Vue({
el: "#app",
data() {
return {
options: ['Option 1','Option 2','Option 3', 'Option 4'],
selected: []
}
}
});
<div id="app">
Hold down CTRL or SHIFT while selecting.<br>
<select v-model="selected" multiple>
<option v-for="item in options">{{ item }}</option>
</select>
<hr>
Selected: {{ selected }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
If you want a more advanced control that looks nicer and/or uses checkboxes, you can create a custom control or use a library like Vue-multiselect or Vuetify, for example.
I'm new with vue.js, and trying to find the best way to get a value from <option> of <select> element, and store it to data() property, so it can be passed to another component.
That <select> section looks like this:
<select ref="select">
<!-- key "item" == js object in array, fetched from API -->
<option
v-for="(item, index) in arr"
v-bind:key="index"
:value="item">{{item.val}}</option>
</select>
So, what's the best way to get item.val and put it into data() ?
Thanks in advance.
new Vue({
template:'
<select v-model="selectedOption" #change="handleChange">
<option value="" disabled>--Select--</option>
<option v-for="item in data" :value="item.val">{{item.text}}</option>
</select>
',
data:{
selectedOption:''
},
methods:{
handleChange:function(event){
console.log(this.selectedOption); //you will find the value here
}
}
})
The vue template:
<select v-model="selectVal" ref="select">
<option
v-for="(item, index) in arr"
v-bind:key="index"
:value="item">{{item.val}}</option>
</select>
The js code:
data: function(){
return {
selectVal: 0,
};
},
So basically I have this;
<ul class="queryView">
<li
v-for="(object, index) in Objects"
>
{{ object.key }}
<input
type="text"
#input="saveValue(value)"
>
</li>
</ul>
...
saveValue(value){
... do somthing with value
},
Since it's in a loop, v-model does not work as they will affect each looped element. i.e If in one input field I put in a word all of the fields will display the same word.
thus I need to get the input value directly into the function.
v-model does work if properly used.
See this JS Fiddle:
https://jsfiddle.net/eywraw8t/167740/
But if you want to use a function to handle the values, it is also fine, but much more verbose.
See this JS Fiddle:
https://jsfiddle.net/eywraw8t/167731/
See the docs: https://v2.vuejs.org/v2/api/#v-on
[…] the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property: v-on:click="handle('ok', $event)".
The "input" event has a target property, which in your case is your <input> element, on which you can read its current value.
new Vue({
el: '#app',
methods: {
saveValue(event) {
const target = event.target;
const value = target.value;
console.log(value);
},
otherMethod(text1, event) {
console.log(text1);
console.log(event.target.value);
},
},
});
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
<ul>
<li v-for="i in 3">
{{i}}<input #input="saveValue" />
</li>
</ul>
<p>
With inline statement:
<input #input="otherMethod('other', $event)" />
</p>
</div>
When trying to create dynamic input elements i get an template compiling error like this:
v-model does not support dynamic input types. Use v-if branches
instead.
https://jsfiddle.net/u8ncfdvn/
HTML
<div id="app">
<sr-el :persons="personsFoo" name="foo" type="number"></sr-el>
<br>
<sr-el :persons="personsBar" name="bar" type="text"></sr-el>
</div>
JS
Vue.component('sr-el', {
template: `
<span>
<input :type="type" :name="name" :id="name" v-model="inputVal" :class="{invalid: !persons}">
Here's the bound {{ name }} input value: {{ inputVal }}
</span>
`,
props: ['type', 'name', 'persons'],
data() {
return {
inputVal: this.persons,
}
}
})
new Vue({
el: '#app',
data() {
return {
personsFoo: 1,
personsBar: 2,
}
}
})
As of version 2.5.0, Vue supports dynamic input types, so you're now able to bind type to a data property like you want:
<input :type="type" :name="name" :id="name" v-model="inputVal">
Here's a working fiddle.
For anyone who still needs to use a version earlier than 2.5:
What this error is saying is that, if you dynamically change the input type being sent to the component, Vue will not update the input element to change its type.
You should use v-if statements instead:
<input v-if="type == 'text'" type="text" :name="name" :id="name" v-model="inputVal">
<input v-if="type == 'number'" type="number" :name="name" :id="name" v-model="inputVal">
I would like to bind v-model to a specific array element like the following, is this possible?
<input v-model='item[1]' />
Thanks
Yes, that is the right way:
var vm = new Vue({
el: '#vue-instance',
data: {
items: ["Item1", "Item2"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="vue-instance">
<input v-model='items[0]'/>
<div v-for="item in items">
{{item}}
</div>
</div>