[Vuejs]-Vuejs build checkbox dynamically from array

by

0👍

✅

You have several things you need to correct.

  1. You called the methods attribute method.

  2. You don’t call the setCheckbox() while initializing the component. You need to do this in either created() or mounted(). If you want to dynamically watch the example string, you would also have to watch this string and the reset the names array.

  3. You don’t save the names effectively. You just create a constant with the name names but you must assign it to the vue component (this).

  4. You pushed a string into the array (the name), but you actually wanted to push an object containing a string and a boolean.

  5. You could improve your code, if you split the logic of the loop and extracting the string from the checkbox view. You can do this by creating a component for the checkbox which is looped over multiple times. Then, you’d have a single state in a checkbox component with a name and a boolean.

The first four things should be fixed now in this snippet (I did not run it):

<div id='example-3'>
   <div v-for="(item, index) in names" :key="index">
      <input type="checkbox" :id="item.name" v-model="item.checked">
      <label :for="item.name">{{ item.name }}</label>
   </div>
   <span>Checked names: {{ checkedNames }}</span>
</div>

I removed the names array that supported the checkbox, in order to pass dynamically the new values.

new Vue({
    el: '#example-3',
    data() {
        return {
            names: []
        }
    },
    methods: {
        setCheckbox() {
            this.names = [];

            // you might want to extract this string and recall this function after it changes
            var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."

            var regExp = /{([^}]*)}/g;
            var matches = value.match(regExp);

            for (var i = 0; i < matches.length; i++) {
                this.names.push({
                   name: matches[i],
                   checked: false
                });
            }
        }
    },
    computed: {
        checkedNames() {
            return this.names.filter(item => item.checked).map(name => name.name)
        }
    },
    created() {
        this.setCheckbox();
    }
})

0👍

Several issues.

  • you’re not calling setCheckbox()
  • several errors.

Here’s something closer to what you’re looking for:

new Vue({
    el: '#example-3',
    data() {
        return {
            names: []
        }
    },
    methods: {
        setCheckbox: function() {

            var txt = "These arethe names for checkbox {Rob} is 20, {Carlos} is 22 and {Mike} is 19."

            var regExp = /{([^}]*)}/g;

            var matches = txt.match(regExp);
            var arrCheckbox = [];

            console.log(matches);
            for (var i = 0; i < matches.length; i++) {
                var str = matches[i].replace(/{(.*)}/, '$1');
                this.names.push({name: str, checked: false});
            }
        }
    },
    computed: {
        checkedNames() {
            return this.names.filter(item => item.checked).map(name => name.name)
        }
    },
    mounted() {
        this.setCheckbox();
    }
})

Here’s a working fiddle: https://jsfiddle.net/jmbldwn/3Lrbw56s/8/

Leave a comment