[Vuejs]-Vue.js – component that binds a binary string to checkbox inputs

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: