vue数据集输出undefined

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

您需要访问所选的选项元素并从那里获取数据索引。像这样的东西：

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

Answer 2

用户selectedIndex（索引 - 实际上是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>

小提琴：https://jsfiddle.net/7ysa14cf/

Answer 3

将您的@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 */
}