Question

我正在尝试通过setCheckbox方法构建并选中复选框。这个想法是动态设置名称以构建复选框数组。

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

我删除了支持复选框的名称数组，以便动态传递新值。

new Vue({
    el: '#example-3',
    data() {
        return {
            names: []
            /*  Below is how the names should receive the array to support the checkbox
        [
      {
        name: '',
        checked: false
      }, {
        name: '',
        checked: false
      }, {
        name: '',
        checked: false
      }
      ]
     */
        }
    },
    method: {
        setCheckbox: function() {

            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);
            var arrCheckbox = [];

            for (var i = 0; i < matches.length; i++) {
                var str = matches[i];
                arrCheckbox.push(str);

                // set the names in the array
                const names = arrCheckbox
            }
        }
    },
    computed: {
        checkedNames() {
            return this.names.filter(item => item.checked).map(name => name.name)
        }
    },
})

基本上试图动态地将数组传递给名称，方法集值需要构建名称。 https://jsfiddle.net/bernlt/aj6apozq/114/

Answer 1

您有几件事需要更正。

您将方法属性称为method。
在初始化组件时不会调用setCheckbox()。您需要在created()或mounted()中进行此操作。如果要动态观看示例字符串，则还必须观看此字符串并重置names数组。
您没有有效地保存名称。您只需创建一个名称为names的常量，但必须将其分配给vue组件（this）。
您已将字符串推入数组（名称），但实际上您想将包含字符串和布尔值的对象推入。
如果您拆分循环逻辑并从复选框视图中提取字符串，则可以改进代码。为此，可以为复选框创建一个组件，该组件可以多次循环。然后，您将在复选框组件中具有一个名称和一个布尔值的单一状态。

现在应该在此代码段中修复前四件事（我没有运行它）：

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

我删除了支持复选框的名称数组，以便动态传递新值。

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

Answer 2

几个问题。

您没有调用setCheckbox（）
几个错误。

以下与您要查找的内容更接近：

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

这是一个工作的小提琴：https://jsfiddle.net/jmbldwn/3Lrbw56s/8/

Vue.js从数组动态构建复选框

2 个答案: