动态创建组件的父子通信

我想用VUE和LARAVEL构建一个表单，用户可以在其中动态地构建参与者组。我决定解决这个问题，让用户为每个组生成一个表格。在每张桌子内部，她/他可以添加和删除行。动态创建组件的父子通信

到现在为止，我得到了这一点：

家长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）我正面临的另一个问题是，我想在每个select动态创建的select输入上使用库select2.js。是否有可能在我写这封信，这意味着系统应用此库，是有可能：

$('#component').select()

是非常选择之前创建？就像Jquery“.on（）”一样？

来源

2017-02-20 Ivan_nn2

我在这一刻发现错误是与子组件发出的事件相关的属性不能有camelCase语法。

这样：

@removeBlockParticipant="removeBlockParticipant"

应该是：

@remove-block-participant="removeBlockParticipant"

万一有人有同样的问题。

来源

2017-02-20 10:50:47

动态创建组件的父子通信

回答

相关问题