私は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>
関連した質問
- Vuejsを使用したボタンクリックでデフォルトの防止オプションを使用できません
- 特定のアコーディオンを切り替える関数にv-modelを渡す方法はありますか?
- Vue:ローカルストレージからユーザー情報にアクセスする方法
- Vue:コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか?
- VueおよびVuetifyの動的コンテンツ内でレンダリングされない画像ソース
- vuetifyでvuejsビルドサイズを減らす方法は?
- npmパッケージをnuxtjsに追加できません[vue-star-rating]
- 複数の型と型付き配列を使用したVuejsプロップ検証
- Vue:アクションが実行されていないときにボタンを非表示にする
- データ内のvueコンポーネントをレンダリングする
b-form-checkboxのv-modelを配列にしたい場合は、b-form-checkbox-groupでb-form-checkboxをラップし、v-modelを設定する必要があります
https://bootstrap-vue.js.org/docs/components/form-checkboxを参照してください