動態創建組件的父子通信

我想用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

動態創建組件的父子通信

回答

相關問題