Question

我正在使用带有laravel的Vuejs 2。目前我正在使用权限模块的选择框，它是一个盒子复杂的结构。我遇到的问题是当我尝试在v-model中绑定我的嵌套数组项时，它充当字符串。每次我检查一个盒子它都会覆盖变量。

workspace.selectedOperations是覆盖的模型。

这是它的html：

<b-tab v-for="workspace in addedWorkspaces" :key="workspace.id" :title="workspace.title" active>
                    <div class="roles-permissions">
                        <label>Permissions</label>
                        <div class="permissions-path">
                            <ul class="pl-0">
                                <li v-for="entity in workspace.entities">
                                    <b-form-checkbox>{{entity.title}}</b-form-checkbox>
                                    <ul>
                                        <li v-for="operation in entity.operations">{{workspace.selectedOperations}}
                                        <b-form-checkbox v-model="workspace.selectedOperations" :value="operation.id">{{operation.title}}</b-form-checkbox>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </b-tab>

这是剧本：

<script>
import Multiselect from 'vue-multiselect'
export default {
props : ['showModalProp'],
    data () {
        return {
            title : '',
            value: [],
            entities : [],
            addedWorkspaces : [],
            selectedWorkspaces : '',
        }
    },    
methods: {
    getOperationsList(){
        this.$http.get('entity').then(response=>{
            response = response.body.response;
            this.entities = response.data;
        });
    },
    showModal() {
        this.$refs.myModalRef.show()
    },
    hideModal() {
        this.$refs.myModalRef.hide()
    },
    onHidden(){
        this.$emit('HideModalValue');
    },
    addWorkspaces(){
        this.addedWorkspaces = this.selectedWorkspaces;
        this.selectedWorkspaces = [];
        for (var i = this.addedWorkspaces.length - 1; i >= 0; i--) {
            this.addedWorkspaces[i].entities = 
            JSON.parse(JSON.stringify(this.entities));
            this.addedWorkspaces[i].selectedOperations = [];
        }
    }        
},
mounted(){
    this.getOperationsList();
},
  components: {
    Multiselect
  },    
watch:{
    showModalProp(value){

        if(value){
            this.showModal();
        }
        if(!value){
            this.hideModal();
        }

    }
},
computed :{
    options(){
        return this.$store.getters.getWorkspaces;
    }
}
}  
</script>

Answer 1

如果你想要b-form-checkbox的v-model是一个数组，你应该用b-form-checkbox-group包装b-form-checkbox并在其上设置v-model

请参阅https://bootstrap-vue.js.org/docs/components/form-checkbox

Vuejs v-model覆盖数组

1 个答案: