vue js将数据传递到组件

Question

hello i have a problem with passing data to a component "modal " , i use a modal with bootstrap-vue component and i need to pass the index , here's what i tried to do

<table class="table table-striped" v-show="Questions.length!=0">
<tr v-for="Question in Questions">
  <td>{{$index + 1}}</td>
  <td>{{ Question.text }}</td>
  <td>
  <button v-on:click="showmodal = true"  class="btn btn-default" >Manage</button>
  <modal :show.sync="showmodal"  width="400">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">Manage Question</h4>
    </div>
    <div slot="modal-body" class="modal-body">
    <div class="input-group col-lg-6">
      <input type="text" class="form-control"  value="{{ Questions[$index].text }}"></input>
      <span class="input-group-btn"><button v-on:click="AddQuestion"  class="btn btn-default">Save Question</button></span>
    </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
    <button type="button" class="btn btn-default" v-on:click='showmodal = false'>Exit</button>
    <button type="button" class="btn btn-success" v-on:click='showmodal = false'>Custom Save</button>
    </div>
  </modal>
  <button class="btn btn-danger" v-on:click="DeleteQuestion($index)">Delete</button>
  </td>
</tr>

hint : the data that passed to the modal in index , is the last index , Even though the modal it's inside the loop

Answer 1

Use Vue props: http://vuejs.org/guide/components.html#Props

In your example:

<modal :show.sync="showmodal" :index="$index" width="400">
    ...
</modal>

Then inside your Vue modal component:

props: ['index']

You will then be able to access the index inside the component, like any other property: this.index