What is the best way to pass an object into a method within a select element using Vue

Question

What is the best way to pass an object into a method within a select element using Vue

Kindly review the following code snippet.

  <tr>
    <td>Select Timeslot</td>
    <td colspan="2">
      <select class="form-control" v-on:change="onTimeSlotClick">
        <option v-for="slot of slots">
          <label slot.time_from - slot.time_to</label>
        </option>
      </select>
    </td>
  </tr>

I am looking to pass the slot object to the onTimeSlotClick method. How can I achieve this? I attempted using onTimeSlotClick(slot) but it seems to return undefined in the onTimeSlotClick method.

javascript laravel vue.js

Answer 1

Answer №1

When working with a select tag in Vue.js, ensure to use the v-model directive and set the value as an object.

var vm = new Vue({
  el: '#vue-instance',
  data: {
    rows: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ],
    item:""
  },
  methods:{
    onTimeSlotClick: function(item){
      console.log(item);
      }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
   <select class="form-control" v-model="item" v-on:change="onTimeSlotClick(item)">
         <option value="">Select</option>
        <option v-bind:value="row" v-for="row in rows">
          <label>{{row.name}}</label>
        </option>
      </select>
      <div>{{item | json}}</div>
</div>

Answer 2

When working with a select tag in Vue.js, ensure to use the v-model directive and set the value as an object.

var vm = new Vue({
  el: '#vue-instance',
  data: {
    rows: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ],
    item:""
  },
  methods:{
    onTimeSlotClick: function(item){
      console.log(item);
      }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
   <select class="form-control" v-model="item" v-on:change="onTimeSlotClick(item)">
         <option value="">Select</option>
        <option v-bind:value="row" v-for="row in rows">
          <label>{{row.name}}</label>
        </option>
      </select>
      <div>{{item | json}}</div>
</div>

Answer 3

Answer №2

Consider implementing a v-model attribute on the select element to achieve the desired functionality.

<tr>
    <td>Select Timeslot</td>
    <td colspan="2">
      <select class="form-control" v-model="selected" v-on:change="onTimeSlotClick(selected)">
        <option v-for="slot of slots">
          <label slot.time_from - slot.time_to</label>
        </option>
      </select>
    </td>
  </tr>

You have the option to either pass selected explicitly as shown in the example, or utilize onclick as a trigger and retrieve selected from its Vue-defined location.

If possible, try to minimize the use of event handlers. Utilizing reactive pipes can often simplify your code while making it more concise and expressive.

Answer 4

Consider implementing a v-model attribute on the select element to achieve the desired functionality.

<tr>
    <td>Select Timeslot</td>
    <td colspan="2">
      <select class="form-control" v-model="selected" v-on:change="onTimeSlotClick(selected)">
        <option v-for="slot of slots">
          <label slot.time_from - slot.time_to</label>
        </option>
      </select>
    </td>
  </tr>

You have the option to either pass selected explicitly as shown in the example, or utilize onclick as a trigger and retrieve selected from its Vue-defined location.

If possible, try to minimize the use of event handlers. Utilizing reactive pipes can often simplify your code while making it more concise and expressive.

What is the best way to pass an object into a method within a select element using Vue

Answer №1

Answer №2

Similar questions

The React Native File generator

Guide to transferring a JavaScript/Ajax variable to a PHP webpage with the help of AJAX

The semantic UI search functionality is malfunctioning

Automatically populate the article number field once the article name has been entered

Changing the boolean value in a database by invoking a function within an href link

I'm encountering an issue with automatically updating content on a webpage

Ensure the accuracy of submitted form information

Can Firebase lists be reversed?

identify the vuetify slider display

Execute the JS file to retrieve the initial port available within the npm script

Popovers in Bootstrap 4 do not have clickable Custom Forms

Utilizing object properties to dynamically update components in VueJS

Automatic Full-Screen Switching Upon Video Playback in HTML5

POST request body is not defined

Enhancing jQuery UI elements (Customizing jQuery Datepicker to prevent incorrect entries)

How to utilize JavaScript to convert a string into a function name

Extensions for selecting and making Datatable responsive

JS/JQuery: Retrieve value from dropdown list or input field

Can you place a v-snackbar underneath a temporary v-navigation-drawer?

Error encountered with select2 when using a remote JSONP dataset