current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

In Vue.js, how would I write a component that binds to a string of 1s and 0s, such as "111001011", and represents this data to the user as a set of named checkboxes?

share|improve this question
    
What have you tried so far? – craig_h Jan 9 at 11:57
up vote 0 down vote

Maybe this is what you'r looking for:

App.vue

<template>
    <div id="app">
        <checkboxes :binary="binary"></checkboxes>
    </div>
</template>

<script>
import Checkboxes from './components/Checkboxes'

export default {
    name: 'app',
    data(){
        return {
            binary: "11001011"
        };
    },
    components: {
        Checkboxes
    }
}
</script>

Checkboxes.vue:

<template>
    <div>
        <ul>
            <li v-for="position in binary.length">
                <label>
                    <input type="checkbox" :name="binary[position - 1]" :checked="binary[position - 1] == '1' ? true : false"> {{ binary[position - 1] }}
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'checkboxes',
    props: {
        binary: {
            required: true,
            type: String
        }
    }
}
</script>

This will go through the string length and for each character will mark as checked/unchecked based on the binary value(1/0)

Result:

enter image description here

share|improve this answer
    
Indeed! What is lacking in the example however, is the component's ability to be dynamically bound to the prop, and as such function as an input. – zxz Jan 10 at 11:40
    
I can't see what's more dynamic than a prop :) – AfikDeri Jan 11 at 8:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.