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
Related
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>
In my vue app I am wanting filter a list to show only entries that have been moderated.
What I am finding though is the when the checkbox is checked, I get all the results that are true, and when the checkbox is unchecked I get all the results are false, however what I am wanting is that when the checkbox is empty no filtering takes place, and when the checkbox is checked I get results that have been moderated.
here is my attempt,
<input type="checkbox" v-model="showUnModerated" /> Show only unmoderated listings</label>
My filter code,
return this.listing.listings.filter(listing => (this.showUnModerated ? 1 : 0) === listing.moderated);
You can add an array of modified list and v-model with your checkbox.Thus you can get the modified list.
new Vue({
el: '#app',
data: {
showChecked: []
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<input type="checkbox" value='1' v-model="showChecked" /> element 1</label> <br>
<input type="checkbox" value='2' v-model="showChecked" /> element 2</label>
<br> {{showChecked}}
</div>
You can change the condition of filter to return all entries when the checkbox is empty(this.showUnModerated is false).
return this.listing.listings.filter(listing => (this.showUnModerated ? (1===listing.moderated) : true);
I am creating a dropdown menu where the user is able to check multiple checkboxes and the values will be added to the array and after that displayed in DOM.
But the user must be able to write his own option in the input and this value will be also added to the array and afterward displayed in DOM with the other options.
The "other" input should be hidden until the "other" checkbox is checked.
my idea was to add : value attribute which will be reflecting input's v-model value but it does not work the way I want.
Any ideas, please? Thank you for all your tips.
I made an example - in JSFiddle - https://jsfiddle.net/rxz65s4m/4/
Code:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h1>
What have you eaten today?
</h1>
<input type="checkbox" id="first" v-model="selected" value="Fish">
<label for="first">Fish</label>
<br />
<input type="checkbox" id="second" v-model="selected" value="Meat">
<label for="second">Meat</label>
<br />
<input type="checkbox" id="third" v-model="selected" value="Potatoes">
<label for="third">Potatoes</label>
<br />
<!-- Need to take the value from the input -->
<input type="checkbox" id="fourth" v-model="selected" :value="otherText">
<label for="fourth">Other</label>
<!-- this input should be hidden until the checkbox above is checked -->
<input type="text" v-model="otherText">
<p>
{{selected}}
</p>
</div>
and script:
new Vue({
el: '#app',
data: {
selected: [],
otherText: null
}
})
EDIT: For better explanation: After the "other" checkbox is checked, user will be able to type inside the input which is located right next to the "other" checkbox. The word which is typed inside the input should be added to the array which is then displayed in DOM. Typing in the input should reactively change the value in array so in the end there should be e.g. array: ["Fish", "somethingUserTyped"]
You can use the #change event.
Compare: https://v2.vuejs.org/v2/guide/forms.html
Fiddle: https://jsfiddle.net/mgLrv4kd/1/
new Vue({
el: '#app',
data: {
selected: [],
otherText: null
},
methods: {
getInput(input) {
this.selected.push(input);
}
}
})
<input type="text" v-model="otherText" #change="getInput(otherText)">
I'm trying to create a form in which one text input field will have disabled attribute if a checkbox is checked. I tried:
new Vue({
el: "#app",
data: {
isChecked: false,
name: null
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<input type="text" v-model="name" :class="{disabled: isChecked}" placeholder="disabled if box checked">
<input type="checkbox" v-model="isChecked">
</div>
Instead if using a conditional class, you can just use the property disabled and make it dynamic by adding a : in front of it and binding it to the isChecked variable. Your code will then look like this :
<div id="app">
<input type="text" v-model="name" :disabled="isChecked" placeholder="disabled if box checked">
<input type="checkbox" v-model="isChecked">
</div>
I have multiple row of radio inputs. User have to select either fixed or percentage from each row. i.e
I can't find the best definition in the ractive documentation.
when my js has
{name: 'foo', checked: true}
And my template has
<input type="radio" name="{{name}}" value="fixed" checked="{{checked}}">Fixed
I can not do that in ractive as its saying
A radio input can have two-way binding on its name attribute, or its checked attribute - not both
Is there any documentation anywhere you know can help me to use multiple value in in input element.
Or how can I do that in ractive?
Thanks.
When you use two-way binding with radio inputs, Ractive will automatically check the one that has the same value as the bound variable (in your case name):
<input type="radio" name="{{day}}" value="Monday">
<input type="radio" name="{{day}}" value="Tuesday">
<input type="radio" name="{{day}}" value="Wednesday">
<input type="radio" name="{{day}}" value="Thursday">
<input type="radio" name="{{day}}" value="Friday">
<input type="radio" name="{{day}}" value="Saturday">
<input type="radio" name="{{day}}" value="Sunday">
new Ractive({
el: 'body',
template: '#template',
data: {
// Friday will be checked by default.
day: 'Friday'
}
});
Tutorial: http://learn.ractivejs.org/two-way-binding/1
I think this will do what you want (though I'm not entirely sure about your data model):
<input type="radio" name="{{checked}}" value="{{ true }}">Fixed
<input type="radio" name="{{checked}}" value="{{ false }}">%
<br>
{{name}} is {{checked}}
where
data: {
name: 'foo', checked: true
}
See http://jsfiddle.net/9jan1j7q/
Per #martypdx's answer, you only need to associate/bind the input to the property it represents, but the trick was that in order for the input value to match the property value (what #martin-kolarik meant) when the value is a boolean is that you need to wrap it with handlebars (like #martypdx did).
Granted, if you're trying to create a POST-able form (since you want the name to show up as the input name), this won't be correct because Ractive will name the input from the context/keypath.
Updated fiddle -- http://jsfiddle.net/drzaus/9jan1j7q/1/
Template
<table>
{{#each list}}
<tr>
<th>{{name}}</th>
<td>
<label><input type="radio" name="{{checked}}" value="{{true}}">Fixed</label>
<label><input type="radio" name="{{checked}}" value="{{false}}">%</label>
</td>
</tr>
{{/each}}
<pre>{{json(this)}}</pre>
Ractive
function createEntry() {
return { name: Math.random().toString(36), checked: Math.random() < 0.5 }
}
function createList(n) {
var list = [];
while(n-- >= 0) list.push(createEntry());
return list;
}
var r = new Ractive({
el: document.body,
template: '#template',
data: {
list: createList(5)
,
// debug formatting
json: function(arg) { return JSON.stringify(arg, undefined, 4); }
}
})