Develop Reference

change checkbox value vuejs

I need to change the checkbox value, Instead of true to be 1
and instead of false to be 0.
Here's my code :
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault"
v-model="discount.has_limit_times_use">
<label class="form-check-label" for="flexCheckDefault">
Limit number of times this discount can be used in total
</label>
</div>
I tried this code but it doesn't work. Can someone help me on this ?

You can try this, it is documented in Vue 3 Form input bindings.
string value:
<input type="checkbox" v-model="discount.has_limit_times_use" true-value="1" false-value="0">
number value:
<input type="checkbox" v-model="discount.has_limit_times_use" :true-value="1" :false-value="0">

Observation: As you are having v-model attribute in your input element. Then you can achieve the checkbox value binding via v-model itself.
Demo :
new Vue({
el: '#app',
data: {
discount: {
has_limit_times_use: 1
}
},
methods: {
getVal() {
console.log(this.discount.has_limit_times_use)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" :true-value="1" :false-value="0" v-model="discount.has_limit_times_use" #change="getVal">
</div>

Vue JS v-model data doesn't update when used with watch

Here is my code
data() {
return {
crop_mode: 'portrait',
widget_data:''
}
},
watch: {
widget_data: function (val) {
this.crop_mode = val.crop_mode
},
},
This code is inside a modal component. So whenever a modal is opened, "widget_data" changes. And this widget_data has a "crop_mode" which needs to assigned to the data variable "crop_mode"
This works fine if I console.log the val.crop_mode but when I do v-model on crop_mode like below, it doesn't update the checked radio button.
<label class="custom-radio block">
<input
type="radio"
value="portrait"
name="crop_mode"
v-model="crop_mode"
/>
<span>Portrait</span>
</label>
<label class="custom-radio block">
<input
type="radio"
value="landscape"
name="crop_mode"
v-model="crop_mode"
/>
<span>Landscape</span>
</label>
<label class="custom-radio block">
<input
type="radio"
value="square"
name="crop_mode"
v-model="crop_mode"
/>
<span>Square</span>
</label>

You should add deep:true option because It looks like widget_data is an object with nested values:
watch: {
widget_data:{
handler(val) {
this.crop_mode = val.crop_mode
},
deep:true
}
},

Vue: How to display different images based on RadioButton choice

I am facing a problem where I want to display a different image if a radiobutton is selected with Vuejs. It currently only shows the image for the false state since I do not seem to be able to retrieve the state of the button in the way I tried. Here is an example with two buttons:
<template>
<div id="choose-route">
<label>
<input type="radio" name="Radio" id="choice1"
v-on:change="someMethodOne"
/>
<img
:src="checked ? 'icon_checked.png' : 'icon.png'"
/>
</label>
<label>
<input type="radio" name="Radio" id="choice2"
v-on:change="someMethodTwo"
/>
<img
:src="checked ? 'different_icon_checked.png' : 'different_icon.png'"
/>
</label>
</div>
</template>
<script>
export default {
methods: {
someMethodOne () {
// does something
},
someMethodTwo () {
// does another thing
}
}
}
</script>
<style>
</style>
How do I go about changing the image based on the checked state of the radiobutton? I already did it using CSS, but that lead to another problem due to the fact that I use recursive components which is why I am here now.

Use v-model. You can also use watch to do something when checked value change.
There is this exact example on Vue.js' website.
https://v2.vuejs.org/v2/guide/forms.html#Radio
new Vue({
el: "#app",
data: {
checked: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="radio" id="one" value='One' v-model="checked">
<label for="one">Option one</label>
<br>
<input type="radio" id="two" value="Two" v-model="checked">
<label for="two">Option two</label>
<br>
<span>Checked: {{ checked }}</span>
<br>
<span v-if="checked === 'One'">One is checked!</span>
<span v-else-if="checked === 'Two'">Two is checked!</span>
</div>

Vue -Store Comma Separated Dynamic Checkbox ids in String

I am having a custom checkbox in vue which dynamically gets generated using a v-for loop.I need to get the ids of every checked checkbox and store it in the form of string with comma separated.
For EG: "Male , Female, Other" - these are the checked values.
But as i am generating checkboxes using a v-for the checked values are getting overridden.
Below is the fucntion that gets called on checkbox click.
updateCheckAll(e) {
let checkboxes = [];
if(e.target.checked) {
checkboxes.push(e.target.id);
}
checkboxes.join(',');
}
HTML - These are custom checkboxes.
<formfield v-for="(option,index) in getCheckBoxData" :key="index" :label="option.value">
<checkbox :id="option.key" :value="option.value" #change="updateCheckAll($event)"></checkbox>
</formfield>

You need to keep state of checked checkboxes:
data() {
return {
checked: [],
}
},
//template
<checkbox :id="option.key" :value="option.value" v-model="checked">
That is all you need to do 😉

You can check the vue documentation for more details
https://v2.vuejs.org/v2/guide/forms.html
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
Code pen
https://codepen.io/tonytomk/pen/NWxbeOB

AngularJS ng-repeat with multiple radio inputs

I've got small problem with ng-repeat on persons with multiple radio inputs (yes/no). Input names should be different because of name="person.name" but it behaves like they all are the same. Somebody knows how to fix this?
http://jsfiddle.net/Chotkos/EbU8g/
HTML:
<form name="myForm" ng-controller="MyCtrl">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>{{person.name}}
<input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
<input type="radio" ng-model="person.decision" name="person.name" value="No" />
</label>
</li>
</ul>
</form>
JS:
function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
}

You need to use {{ person.name }}, rather than "person.name" in that context.

I don't know why you got downvoted. Your question was fine. So you are using the name property which is traditional in an HTML form. Since name isn't part of angular, you need to wrap the person.name in curly brackets name="{{person.name}}" so angular knows to parse it.

Please see here: http://jsfiddle.net/Chotkos/EbU8g/
that happend because you wrapped all inputs into label tag
<form name="myForm" ng-controller="MyCtrl">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>{{person.name}}</label>
<input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
<input type="radio" ng-model="person.decision" name="person.name" value="No" />
</li>
</ul>
</form>