Я использую Vuejs 2 с Laravel.В настоящее время я работал с полями выбора для модуля разрешений, и это сложная структура коробки.Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь связать свой вложенный элемент массива в v-модели, он действует как строка.каждый раз, когда я ставлю флажок, он перезаписывает переменную.
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>