Vue data set is displaying as undefined

Question

Vue data set is displaying as undefined

Having an issue passing the value and index of an object to a vue method. The method successfully displays the value, but the index remains undefined. Looking for guidance on where the mistake might be.

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 is returning undefined

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

To retrieve the data-index from the chosen choice element, you must access it directly. Here is an example of how to do so:

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

Answer 2

To retrieve the data-index from the chosen choice element, you must access it directly. Here is an example of how to do so:

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

Answer 3

Answer №2

The user decided to use selectedIndex (index - 1 to skip the first option) instead:

<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 4

The user decided to use selectedIndex (index - 1 to skip the first option) instead:

<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 5

Answer №3

To make a modification, replace your @change with this:

<select @change="alter_default_canvas" id="choose_business_model_version">

Your alter_default_canvas function should resemble the following:

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

Answer 6

To make a modification, replace your @change with this:

<select @change="alter_default_canvas" id="choose_business_model_version">

Your alter_default_canvas function should resemble the following:

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

Vue data set is displaying as undefined

Answer №1

Answer №2

Answer №3

Similar questions

What is the best method for breaking down this JSON data into distinct 'objects'?

What could be causing the title property to not appear?

Design a custom screensaver using jQuery that includes a timed delay feature and an alert message

Unit Testing JWT in Angular 2

Is the "add" feature malfunctioning?

JavaScript - Sending Form Data with Local Time

arrange the elements in an array list alphabetically by name using the lodash library

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

Ways to implement form validation with JavaScript

Experiencing a blank array when using filtering/search text in a Nodejs application with MongoDB

Passing Laravel environmental information to a Vue component

Error encountered during webpack development build due to syntax issues

Troubleshooting a React Node.js Issue Related to API Integration

Create an overlay effect when hovering in a Vue.js application

What's the reason for text-alignment not functioning properly?

Unable to invoke angular ng-click function using jQuery

Display a portion of the existing URL as a clickable link on the webpage using JavaScript or PHP

Exploring Next.js Font Styling and Utilizing CSS Variables

Animate.css does not function properly when loaded locally

The PHP server is having trouble accepting a JavaScript object sent via AJAX