bugfix> javascript > 投稿

私はlaruelで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>