The onclick button functionality appears to be unresponsive within an option tag in Vue.js

Need help with extracting item properties when clicking on the option button

Below is the code snippet:

<select @click="populate" class="form-control" tabindex="12">
    <option disabled value="" selected="selected">Select one</option>
    <option v-for="(payment, index) in paymentsSelect" @click="pop(payment)" 
            :key="index" 
            :value="payment.id">{{ payment.name }}
    </option>
</select>

Data:

selectedPayment: '',
paymentsSelect: [],

Methods:

pop(payment){
    console.log(payment)
},
populate(){
    var self = this

    this.$http.get(this.$backendUrl + 'subjects/payment_method')
    .then(function(response) {
        self.paymentsSelect = response.data.data
    })
    .catch(function() {})
}

Answer №1

To bind the select input to a data property without adding an event, utilize v-model as shown below:

<select v-model="selectedPayment" class="form-control" tabindex="12">
    <option disabled value="" selected="selected">Select one</option>
      <option 
           v-for="(payment, index) in paymentsSelect"  
            :key="index" 
            :value="payment">
         {{ payment.name }}
       </option>
</select> 

The selectedPayment property will update based on the option you choose, making it accessible in your script through this.selectedPayment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Each div in prevAlll() will have its own unique CSS background

In continuation of my initial query, which has now been resolved, you can find the original question here. JS: $(function() { var scaletext = { 1: 'SA', 2: 'A', 3: 'N', 4: 'Da', 5: 'SDa' } $(&a ...

How to use jQuery to retrieve the style of an element based on a specific data attribute

I've been using bxSlider and I decided to create a unique custom pager using the pagerCustom option. My goal was to make the pager resemble a thumbnail pager, so I attempted to copy the style of each slide and attach it to the corresponding pager. For ...

There seems to be an issue with the integration of Bootstrap in my JavaScript file

Is there a way to ensure that each new data entry in the array appears next to each other rather than stacking beneath one another? This is a JavaScript file with HTML written in Bootstrap format. const collegeData = [{ name: "University of Penn ...

Guide to presenting a personalized date format in an Angular table by utilizing the gantt-tooltip attribute

How can I customize the date format displayed in the tooltip to only show the month and day (e.g. Sep 01) within an Angular Gantt table? Currently, the date is being shown in the default format "MMM DD, HH:mm". Can anyone assist me in resolving this issue ...

The functionality of jQuery elements within a jQuery dialog ceases to work following an ajax request

<div id="divItems"><div id="divItemsContent"></div></div> I seem to have identified the issue, but I am unsure how to resolve it. Here is the code in question: function SplitOrder() { var SplitTable = $.ajax({ url: &ap ...

I encountered an issue when trying to convert a CSV file into an array

Having trouble fixing this CSV error after converting it into an array? When I console log the objects in the array, it seems that the last property has an error Code const csvStringToArray = (str, separator = ",") => { const header = str ...

Splitting a loading button within post.map() in React for like/dislike functionality

I'm currently working on implementing a like/dislike feature in React. The issue I've run into is that when I try to like or dislike a post, the like/dislike buttons on all other posts are stuck in a loading state. This means that while I'm ...

Ways to retrieve and contrast the border style of an image utilizing javascript

I'm currently attempting to identify images on my webpage that have the style border: 1px #c6c6c6 solid; let images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { if (images[i].style.border === "1px ...

Prototypical Javascript setter function approach

Currently diving into Javascript. Encountering an issue when attempting to utilize setters in prototyping. Error Message: TypeError: cir1.radiusToCircle is not a function var Circle = function(radius){ this._radius = radius; } //prototype Circle ...

Shift a div out of view (using margin: 0px auto)

How can I achieve a sliding effect for two horizontally centered divs, #box1 and #box2, when a button with the class .class is clicked? The desired animation involves moving #box1 to the left and off the screen, while #box2 slides into view from the right. ...

tips for choosing an element using getByTestId that matches a particular value in react-testing-library

When working with React, I have a scenario where I am mapping out elements from an array. For instance: {options.map((option)=>{ return <div data-testid="option">{option}</div> }) In some cases, I need to select an option withou ...

improper rendering of highcharts

Receiving data in JSON format as shown below: <?php $monthlyParticipation='[{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months ...

What is the best practice for rendering items from a list with keys in ReactJS?

My goal is to create a dynamic product list that updates in real time as new products are added. To achieve this, I am utilizing keys to differentiate between each product in accordance with the guidance provided in the React documentation: A "key" is a ...

What is the best method for enclosing all text within an HTML document with a different element?

For example: FROM <div> whats up! <div> whats up2! </div> thank you for your help <div></div> </div> TO <div> <span>whats up!</span> <div><span> whats up2! </span&g ...

Exploring the capabilities of Angular's ngResource library and how it

Currently, I am developing a Twitch app and instead of using $http, I opted for ngresource to explore new possibilities. However, I encountered an issue with the offline tab where the users are visible but their logo or username is not displayed. This happ ...

What could be causing the JQuery Post and Get methods to not respond or execute when they are invoked?

I'm currently working on a project where I need a webpage to automatically open other pages using the post method through a script, without requiring direct user input. I've tried using the JQuery post method, but haven't had any success so ...

What is the best way to update the values of an array of object properties using an input form in JavaScript?

I'm currently learning node.js, express.js, and handlebars I am working on creating two forms for a blog/news page: an add form and an edit form. /addproject: app.get('/addproject', function(req, res) { res.render('addprojec ...

Creating a user interface to display different game options using Hooks (Developing an interactive rock-paper-scissors game)

I'm currently experimenting with React.js hooks while creating a new version of the classic game "Rock Paper Scissors." I'm facing an issue where the winner is not evaluated immediately after pressing the respective button. Below is a snippet of ...

AngularJS File Input element triggering only once when selecting the same file

I have created an Angular directive to customize the file upload input. directive('ngFile', function () { return { link: function (scope, element, attrs) { var button = element.find('button[data-fileInputButton]&apos ...

Understanding the impact of event loop blocking and the power of asynchronous programming in Node JS

I am new to Node.js programming and I really want to grasp the core concepts and best practices thoroughly. From what I understand, Node.js has non-blocking I/O which allows disk and other operations to run asynchronously while JavaScript runs in a single ...