Vue 切换按钮：无法在“节点”上执行“insertBefore”：

Question

我实现了用于隐藏或显示表格中的列的 vue 切换按钮。例如我在我的孩子 vue 中有 5 个按钮，然后我点击了一些按钮来隐藏，

Button 1 - clicked this button to hide
Button 2
Button 3 - clicked this button to hide
Button 4
Button 5

当它第一次工作时，但当我点击另一个按钮时，请参阅下面的场景。

Button 1 - clicked again this button to show
Button 2 - clicked this button to hide
Button 3 - clicked again this button to show
Button 4 - clicked this button to hide
Button 5

它给了我一个错误。见下图。

PARENT VUE

    <column-filters v-on:column-filters="columnFilters" :fields="fields"></column-filters>
    data: function() {
            return {
                auth: {},
                company_name:'',
                view_date_range: '',
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                fields: [
                              { data: 'sequence_no', label: 'Sequence No.', column: 'id', visible: true, displayed: true  },
                              { data: 'sale_date', label: 'Sale Date', column: 'sale_date', visible: true, displayed: true  },
                              { data: 'number', label: 'SI/OR No.', column: 'number', visible: true, displayed: true  },
                              { data: 'document_reference', label: 'Document Reference', column: 'document_reference', visible: true, displayed: true  },
                              { data: 'customer', label: 'Customer', column: 'customer_id', visible: true, displayed: true  },
                              { data: 'status', label: 'Status', column: 'status', visible: true, displayed: true  },
                              { data: 'sale_amount', label: 'Sales Amount', column: 'sale_amount', visible: true, displayed: true  },
                              { data: 'vat_amount', label: 'VAT Amount', column: 'vat_amount', visible: true, displayed: true  },
                              { data: 'net_of_vat', label: 'Net of VAT', column: 'net_of_vat', visible: true, displayed: true  },
                              { data: 'wht_amount', label: 'WHT Amount', column: 'wht_amount', visible: true, displayed: true  },
                              { data: 'amount_due', label: 'Amount Due', column:'amount_due', visible: true, displayed: true  },  
                            ]
            }
        },

CHILD VUE

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
                <div class="row" v-for="field in fields" :key="f">
                    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                        <label class="label-bold">{{ field.label }}</label>
                    </div> 
                    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                        <toggle-button 
                            v-model="field.visible"
                            :value="true"
                            :color="{checked: '#1e7e34', unchecked: '#bd2130'}"
                           :labels="{checked: 'On', unchecked: 'Off'}"
                           />
                       </toggle-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
                <button type="button" class="btn btn-sm btn-success pull-right" @click="onChangeEventHandler">Apply</button>
            </div>
        </div>
    </div>

    <script>
        export default {
            props: ['fields'],
            name : 'ColumnFilters',
            data: function() {
                return {
                    auth: []
                }
            },
            validations: {
                
            },
            mounted()
            {
               
            },
            components: {
            
            },
            computed:{
                
            },
            methods: {
                onChangeEventHandler(e){
                    swal({
                        title: "Confirm Action",
                        text: 'Are you sure you want to hide this column/s',
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willSave) => {
                        if (willSave) {
                            $('#sales-journal-list-table').DataTable().destroy();
                            for (var i = this.fields.length - 1; i >= 0; i--) {
                                if(this.fields[i].visible == true){
                                    this.fields[i].displayed = true
                                }else{
                                    this.fields[i].displayed = false
                                }
                            }
                            this.$emit('column-filters', this.fields)
    
                        } else {
                            swal("Aborted!");
                        }
                    });
                    e.preventDefault();
                },
            }
        }
    </script>

问题：此错误的原因是什么，我该如何解决？

Answer 1

不确定是否是原因，但我在您的代码中看到了一个问题

<div class="row" v-for="field in fields" :key="f">

没有 f 变量

也许你应该这样做：

<div class="row" v-for="field in fields" :key="field.column">