Ractive two way binding with multiple values - javascript

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); }
}
})

Related

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 -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

Vue JS Radio button toggle all scenario

So I know how I can toggle all radio buttons in a group but I have a slightly niche case here. I'll try and explain as best I can here with code and comments.
SomeComponent.vue
<template>
<div>
<!-- This checkbox will toggle the selected stated of all radios -->
<input class="toggleAll" type="checkbox" :checked="checked" #change="toggleAll">
<!-- These will either toggle their own checked state or
IF the above checkbox has been checked and all checkbox are selected, it would remove the
checked state from that one
as not all the radios ARE selected anymore -->
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
</div>
</template>
<script>
export default {
name: 'SomeComponent',
data() {
return {
checked: false,
}
},
methods: {
toggleAll() {
this.checked = !this.checked;
}
}
}
</script>
So basically, the input with the class of toggleAll will check/uncheck all checkboxes. However, checking any of the others should uncheck the one you clicked plus the toggleAll checkbox, as not all are checked anymore.
I can't seem to get this to work! I basically need to say look for the input with the class of toggleAll and change the data "checked" to false but I don't know how to do it.
TIA
If you don't have any specific preference for the checked states, I would recommend using a list of boolean and toggle their respective states (with Vue.set to overcome the array change detection caveat).
The example below uses a computed setter/getter to reactively tell if all checkboxes are checked, and toggle them at once when the setter gets called.
By the way, I added an extra attribute (indeterminate) that you might find useful.
I'm using the .prop modifier on the "allChecked" checkbox to tell Vue that we want to bind this indeterminate as a DOM property instead of component attribute.
new Vue({
el: '#app',
data() {
return {
checkList: [false, false, false, false]
}
},
computed: {
allChecked: {
get() {
return this.checkList.every(Boolean);
},
set(isChecked) {
for (let index = 0; index < this.checkList.length; index++) {
this.$set(this.checkList, index, isChecked);
}
}
},
indeterminate() {
return !this.allChecked && this.checkList.some(Boolean);
}
}
})
#app > input[type="checkbox"] {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<div id="app">
<label>
<input
v-model="allChecked"
:indeterminate.prop="indeterminate"
class="toggleAll"
type="checkbox" />
Check all
</label>
<input
v-model="checkList[index]"
v-for="(checked, index) of checkList" :key="index"
class="radio"
type="checkbox" />
</div>
It could be that your problem comes from the fact that the #change event only fires when a user interacts with the radio and changes. On the other hand, looking at your code, are you trying to change the main button's status using the checkAll method? In that case, what's the toggleAll referencing in #change="toggleAll"?
In any case, this should do it:
<template>
<div>
<input class="toggleAll" type="checkbox" :checked="checked2" #change="toggleAll">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
</div>
</template>
<script>
export default {
name: 'SomeComponent',
data() {
return {
checked: false,
checked2: false
{
},
methods: {
toggleMain() {
this.checked2 = false;
}
...
}
}
</script>

Vuejs radio button binding input

I am creating edit form page and i run this before the page loaded
beforeMount(){
if(this.$route.meta.mode === 'edit'){
this.initialize = '/api/artikel/edit/' + this.$route.params.id;
this.store = '/api/artikel/update/' + this.$route.params.id;
this.method = 'put';
}
this.fetchData();
},
and in my fetchData() method i just go to server and retrieve corresponding data to my article id.
fetchData(){
var vm = this
axios.get(this.initialize)
.then(function(response){
Vue.set(vm.$data, 'form', response.data.form);
Vue.set(vm.$data, 'rules', response.data.rules);
Vue.set(vm.$data, 'option', response.data.option);
})
.catch(function(error){
})
},
and then in my form i just bind my form data to my input and it works great in input text but not in other like in this question is input radio button
<div class="form-group">
<h5>Publish:</h5>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
Yes
</label>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
No
</label>
</div>
it supposed to be auto check into radio button according to the value from database... but in my case none of them checked.. but when i check manualy by clicking it... i see using the form.publish value is changed according to which radio button i check using vuejs inspector in chrome
so where do i get it wrong?
Might be a matter of how the value is coming in. Because you set values to 0/1 the radio button model needs a 0 or 1 value, and not a true/false, can you check that that's the case?
look at snipped below, see what changing to true does
new Vue({
el: '#app',
data: {
form: {}
},
methods: {
update () {
// does not work
//var form = { publish: true }
// works
var form = { publish: 1 } // <---- are you sure it's 1 and not true?
this.$set(this, 'form', form);
}
},
mounted() {
console.log(this.form)
setTimeout(this.update, 1000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
<div class="form-group">
<h5>Publish:</h5>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
Yes
</label>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
No
</label>
</div>
</div>
okay my bad.... it is not a problem with vue.js but instead because i am using uniform.js for my radio button styling from admin template that i bought in themeforest and they don't provide a clear documentation...
and after searching around i find that the javascript and css that style my radiobutton is by uniform.js and i just add a jquery code to run update the radiobutton
I have wasted few hours, and later got to know, I was missing :checked="item.isActive == true" property while binding. Adding this worked for me.
<input
class="form-check-input"
type="radio"
name="students"
v-model="item.isActive"
:checked="item.isActive== true">

Grabbing the value of checkbox in Vue

Hey so I'm currently a newbie in Vue so have some mercy :)
I am trying to implement a filter bar, where I want to render the checked-box onto a collection view. So a use case would be, if T-shirts was checked then that should render all T-shirts from a DB.
So currently I'm grabbing all the values of beers from my database and rendering that into my filter box:
<div class="overflow menu-list">
<ul>
<li v-for="brewery in breweryName">
<input type="checkbox" name="beer">{{brewery}}
</li>
</ul>
</div>
Where my Vue instance is defined as so:
var filterVM = new Vue({
el: '#filter-bar',
data : {
breweryName : grabFromBeerDB("brewery"),
beerStyle : grabFromBeerDB("style"),
checkedBrewery : []
},
firebase : {
beerList: beerDatabaseRef
}, ...
My only question here is how would I reactively grab the values of the boxes that are checked?
Thanks for the help
Just use v-model
<input type="checkbox" name="beer" value="A" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="B" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="C" v-model="checkedBrewery">
docs: https://v2.vuejs.org/v2/guide/forms.html#Checkbox
<li v-for="brewery in breweryName">
<input type="checkbox" name="beer" :value="brewery" v-model="checkedBrewery">
{{brewery}}
</li>
The value of input is required, and you must make sure each value is different with others.

Categories

Resources