вывод набора данных vue не определен

Question

Я пытаюсь передать значение и индекс объекта в метод vue. Мои методы могут показать значение, но индекс не определен. Посоветуйте, пожалуйста, где я ошибся.

JAVASCRIPT:

<div class="select is-info">
    <select @change="change_default_canvas($event.target.value, 
       $event.target.dataset.index)" id="select_business_model_version">
       <option>Select Version</option>
       <option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
    </select>
</div>

$event.target.dataset.index выводит undefined

Answer 1

Пользователь selectedIndex ( index - 1 фактически пропустить первый вариант) вместо:

<div id="myComp">
  <div class="select is-info">
      <select @change="change_default_canvas($event.target.value, 
         $event.target.selectedIndex)" id="select_business_model_version">
         <option>Select Version</option>
         <option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
      </select>
  </div>
</div>

Fiddle: https://jsfiddle.net/7ysa14cf/

Answer 2

Измените @change на следующее:

<select @change="change_default_canvas" id="select_business_model_version">

В вашем change_default_canvas метод будет выглядеть следующим образом:

change_default_canvas(event) {
    console.log(event.target.value)
    console.log(event.target.dataset.index)
    /* your logic here */
}

Answer 3

Вам необходимо получить доступ к выбранному элементу option и получить оттуда индекс данных. Примерно так:

$event.target.options[$event.target.selectedIndex].dataset.index