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

您需要访问选定的 option 元素并从此处获取数据索引。像这样：

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

Answer 2

用户 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>

提琴：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 */
}

Vue数据集输出未定义

3 个答案: