I have tried all that I have read in other questions and they did not answer me the problem.
I have a checkbox like this in a list
<input type="checkbox" v-model="selected" :value="post.rut">
I have the model defined like this:
data: function() {
return {
selected: []
}
}
The problem is that If I add checked as default.. it does not change at all I mean it keeps the checkbox not checked
<input type="checkbox" v-model="selected" :value="post.rut" checked>
If I remove the v-model, it works BUT I can not send the value to the controller because I need the v-model to bind so I wonder how can I set as default checked in that checkbox input like that?
Thanks
you have the input value as post.rut you can put it in selected array in data like :
data: function() {
return {
selected: [this.post.rut]
}
}
If you already know which field you want to selected based on the post you can do like so:
data: function() {
return {
selected: [this.post.rut]
Here is a working example of what you asked for.
Note: You need not use v-model and :value at the same time since v-model itself is a two way binder.
var app = new Vue({
el: '#app',
data() {
return {
selected: true
};
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="selected"/>
</div>
Related
I was wondering which is the best practise to trigger input validation in Vue JS, using events such as onchange, keyup or having watchers on each property? Let`s assume that you only have around 20 inputs to deal with.
As you said you might have n number of inputs in your form on which you want to add validation. I think watcher is a good feature to use as it will update every time any changes happen in the form data.
In your data object, You can create one formData object which will contain all the input field properties and then you can put a watcher on formData.
Live Demo :
var App = new Vue({
el: '#app',
data() {
return {
formData: {
name: 'Alpha',
age: 30
}
}
},
watch: {
'formData': {
deep: true,
handler(val) {
console.log(val)
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form>
<label for="name">Name
<input id="name" type="text" v-model="formData.name">
</label>Age
<label for="age">
<input id="age" type="number" v-model="formData.age">
</label>
</form>
</div>
So the process is like this. I have a form that is created from api. I want to show all the inputs except for one. That one will only be shown if the user adds value to another specific input from the form.
Something like this is the idea.
<Form>
<div-for="formItem in state.formItemData">
<template v-if="formItem.one !== ''">
<form-input
v-model="invoiceForm.two"
:key="formItem.id"
ref="two"
></form-input>
</template>
</div>
</Form>
const invoiceForm = computed({
get: () => state.forms.formData,
set: (value) => {
state.forms.formData= value
}
})
The concept in your problem is very simple, you just must make use of a computed property that evaluates if there are values in input 1 and it will rerender the component showing input2.
new Vue({
el: '#app',
data: {
input1: '',
input2: ''
},
methods: {
verification() {
console.log(this.input1);
}
},
computed: {
notEmpty() {
return this.input1 !== '' && this.input1.length > 3;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input #change="verification" type="text" v-model="input1"> <input v-if="notEmpty" type="text" v-model="input2">
</div>
You should use a v-show if you're eventually going to show/hide it when rendering, especially if it's going to be multiple times. The Vue documentation says that the v-if will not be rendered when the initial condition is false.
Source: https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show
I have a application where I'm updating value of input element on button click.
I'm using Vue JS v-model for data binding.
HTML :
<div id="app">
<div>{{ response }}</div> <br>
<input type="text" v-model="response.ruleName" value="" placeholder="" class="editing">
<button #click="myalert">Click me</button>
</div>
JS :
var response = {
ruleName: "ruleJohn",
}
new Vue({
el: "#app",
data () {
return {
response
}
},
methods: {
myalert: function(e) {
document.querySelector('.editing').value = e.target.innerText;
},
}
})
Here is working fiddle : https://jsfiddle.net/38Lj971g/
Now, When I try to edit input value with keyboard, response values does change.
When I try to click button, Though input value changes but response doesn't.
How to deal with v-model for such on-click data updates ?
Don't edit the input value directly, instead edit the v-model it gets its data from, like so:
<button #click="response.ruleName = 'Click me'">Click me</button>
or, if you wish to use the method:
myalert: function(e) {
this.response.ruleName = e.target.innerText;
}
I have a <select>-element that has a data property bound to it using v-model in Vue.
Sometimes I want to change that value dynamically. I also have an event-listener attached to this element which is triggered on the change-event. See code example:
<template>
<div class="mySelector">
<select id="testSelect" v-model="mySelectModel"
#change="onChange($event)">
<template v-for="(item, index) in someList">
<option :class="['btn', 'btn-default', 'removing-button']" :value="index">{{item.name}}</option>
</template>
</select>
</div>
</template>
<script>
export default {
data() {
return {
mySelectModel: null
}
},
props: {
},
methods: {
customChange: function() {
this.mySelectModel = ... // some value we from somewhere else that is set dynamically on some condiftion
},
onChange: function (event) {
if (!event) return;
// DO SOMETHING THAT WE ONLY WANT TO DO ON A REAL CLICK
}
},
}
</script>
The problem I have is that when I change the data value mySelectModel dynamically, like in the customChange-method, the change event is also called, triggering the method onChange. I only want to do stuff in that method if it was really triggered by a real click, not when it was changed dynamically.
I can not find a way to distinguish between those cases when the change-event is triggered by a click or when it is just changed for some other reason. Any suggestions?
See vue-js-selected-doesnt-triggering-change-event-select-option, it appears that select does not trigger #change when v-model is updated by JS (only when the selected value is changed by user).
A directive can add the functionality
Vue.directive('binding-change', {
update: function (el, binding, vnode) {
const model = vnode.data.directives.find(d => d.name === 'model')
if (model) {
binding.value(model.value)
}
}
})
use like
<select id="testSelect"
v-binding-change="onChange"
v-model="mySelectModel"
#change="onChange($event)">
Not sure about the parameter to onChange - I'll give it a test.
Similar to this suggested solution, you can make a settable computed that you v-model in your widget:
The get function simply returns the data item
The set function does whatever you want a change in the widget to do, in addition to setting the data item
Other code can change the data item directly and will not execute the set code of the computed.
new Vue({
el: '#app',
data: {
values: ['one','two','three'],
selectedItem: 'two'
},
computed: {
wrappedSelectedItem: {
get() { return this.selectedItem; },
set(value) {
console.log("Changed in widget");
this.selectedItem = value;
}
}
},
methods: {
changeToThree() {
console.log("Stealth change!");
this.selectedItem = 'three';
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<select v-model="wrappedSelectedItem">
<option v-for="value in values" :value="value">{{value}}</option>
</select>
<button #click="changeToThree">Set to three</button>
</div>
I have a computed setter:
rating: {
get() {
return this.$store.state.rating;
},
set(value) {
console.log(value);
this.$store.commit('updateFilter', {
name: this.name,
value
});
}
}
This is linked to my rating like so:
<label>
<input type="checkbox" :value="Number(value)" v-model="rating">
{{ index }}
</label>
I expect the computed setter to log an array because when I use a watcher to watch for changes on the rating model I am getting an array.
Except whenever I use a computed setter like above it simply outputs true when a checkbox is selected or false when they are all deselected.
What is going on here, should I just be getting an array just as like with a watcher?
v-model has somewhat "magical" behavior, particularly when applied to checkboxes. When bound to an array, the checkbox will add or remove the value to/from the array based on its checked state.
It is not clear in your example what value is in Number(value). It should be a value that you want included in the array when the box is checked.
Taking the example from the Vue docs linked above, I have modified it to use a computed, and it works as you might expect, with the set getting the new value of the array.
new Vue({
el: '#app',
data: {
checkedNames: []
},
computed: {
proxyCheckedNames: {
get() {
return this.checkedNames;
},
set(newValue) {
this.checkedNames = newValue;
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="proxyCheckedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="proxyCheckedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="proxyCheckedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>