0
ユーザーが参加者のグループを動的に構築できるVUEとLARAVELのフォームを作成しようとしています。私はこの問題に取り組み、ユーザーがグループごとにテーブルを生成できるようにすることに決めました。各テーブルの内側で、行を追加したり削除したりできます。動的に作成されたコンポーネントとの親子通信
私はこのポイントを取得今まで：
PARENTのHTML：$コンポーネントで発光にメッセージを発生しません
<div class="form-group col-md-12 blocco-partecipante" v-for="participant_block in participant_blocks">
<mimi-table :operators='operators' :participant_block='participant_block' @removeBlockParticipant="removeBlockParticipant" @makeBlockWinner="makeBlockWinner"></mimi-table>
</div>
STYLE.JS
Vue.component('mimi-table', {
props: ['operators', 'participant_block'],
template: '\
<div>\
<div class="row">\
<div class="col-xs-6"><button type="button" class="btn btn-default" @click.prevent="makeBlockWinner">Winner</button></div>\
<div class="col-xs-6"><button type="button" class="btn btn-danger pull-right" @click.prevent="removeBlockParticipant">Remove Block</button></div>\
</div>\
<table class="table table-bordered" id="participants-table" v-model="participant_block">\
<thead>\
<tr>\
<th>#</th>\
<th>Operator</th>\
<th>Head Operator</th>\
<th></th>\
</tr>\
</thead>\
<tbody>\
<tr v-for="(row, index) in rows" track-by="index">\
<th>{{ index + 1 }}</th>\
<td>\
<select style="width: 100%" v-model="row.selected">\
<option v-for="operator in operators" :selected="(row.selected == operator.name)">{{ operator.name}}</option>\
</select>\
</td>\
<td>\
<input type="checkbox" name="head" v-model="row.head_operator" @click="selectHeadOperator(index)"/>\
</td>\
<td>\
<input type="button" class="ibtnDel btn btn-md btn-danger" @click="removeOperator(index)" value="Remove" />\
</td>\
</tr>\
</tbody>\
<tfoot>\
<tr>\
<td colspan="4" style="text-align: left;">\
<input type="button" class="btn btn-lg btn-block" value="Add Operator to Participant Block" @click="addOperator"/>\
</td>\
<tr>\
<tr>\
</tr>\
</tfoot>\
</table>\
</div>\
',
data: function() {
return {
rows : [
]
}
},
methods: {
addOperator: function() {
this.rows.splice(this.rows.length, 0, {});
if (this.rows.length == 1)
this.rows[0].head_operator = true;
},
removeOperator: function(value) {
this.rows.splice(value, 1);
},
selectHeadOperator: function(index) {
this.rows.forEach(function(row, counter) {
if (counter != index) row.head_operator = false;
});
},
removeBlockParticipant: function() {
this.$emit('removeBlockParticipant');
},
makeBlockWinner: function() {
this.$emit('makeBlockWinner');
}
}
});
new Vue({
el: '#main-form',
data: {
participant_blocks: [],
operators: [],
index: 0
},
mounted: function() {
vm = this;
axios.get('/operators').then((response) => {
vm.operators = response.data;
});
},
methods: {
addBlockParticipant: function() {
this.participant_blocks.splice(this.participant_blocks.length, 0, {});
},
removeBlockParticipant: function() {
console.log('test 1');
},
makeBlockWinner: function() {
console.log('test 2');
},
} });
1）親。 removeBlockParticipantとmakeBlockWinnerはメッセージを記録しません。なぜか分からない。これらのコンポーネントは動的に作成されるため、別のシステムを使用する必要がありますか？
2）私が直面しているもう一つの問題は、私が動的に作成している各選択入力にライブラリselect2.jsを使用したいということです。私が書いているシステムでこのライブラリを適用することは可能ですか？つまり、それは可能です：
$('#component').select()
これまでに非常に選択が作成されていますか？ Jquery ".on（）"のようなもの？