Retrieve information attribute within VueJS

Question

Retrieve information attribute within VueJS

Within a v-for loop, I am utilizing a select form in the following manner:

<div class="select">
    <select v-model="shippingMethod">
        <option value="{{shipping.id}}" v-for="shipping in shippingMethods" data-price="{{ shipping.amount}}">{{shipping.description}} - {{shipping.amount / 100}}</option>
    </select>
    <div class="select__arrow"></div>
</div>

I have a method that watches the changes in the shippingMethod model like so:

updateTotal: function(event){
    console.log(this.shippingMethod);
},

While I can retrieve the newly selected option's value, I also need to access the data-price attribute. How would I go about achieving this?

javascript vue.js

Answer 1

Answer №1

Can we consider shipping methods as an array? If yes, instead of using {{shipping.id}} as the value, you can opt for passing the index of the array as {{index}}. This way, in the updateTotal function, you can easily refer to the current option by using

this.shippingMethods[this.shippingMethod]

.

The revised code snippet would be structured like this:

<div class="select">
<select v-model="shippingMethod">
    <option value="{{index}}" v-for="(shipping, index) in shippingMethods" data-price="{{ shipping.amount}}">{{shipping.description}} - {{shipping.amount / 100}}</option>
</select>
    <div class="select__arrow"></div>
</div>

updateTotal: function(event){
    console.log(this.shippingMethods[this.shippingMethod]);
},

Answer 2

Can we consider shipping methods as an array? If yes, instead of using {{shipping.id}} as the value, you can opt for passing the index of the array as {{index}}. This way, in the updateTotal function, you can easily refer to the current option by using

this.shippingMethods[this.shippingMethod]

.

The revised code snippet would be structured like this:

<div class="select">
<select v-model="shippingMethod">
    <option value="{{index}}" v-for="(shipping, index) in shippingMethods" data-price="{{ shipping.amount}}">{{shipping.description}} - {{shipping.amount / 100}}</option>
</select>
    <div class="select__arrow"></div>
</div>

updateTotal: function(event){
    console.log(this.shippingMethods[this.shippingMethod]);
},

Retrieve information attribute within VueJS

Answer №1

Similar questions

What could be the reason behind my Vue custom directives not functioning as expected?

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

Checking for the existence of a row in Node.js using Sqlite3

I want to know how to showcase elements from a list one by one and cycle through them using a button with a nodejs server and Pug

Nuxt - Pausing for a moment after running an asynchronous action with this.$store.dispatch

Guide on using jQuery to incrementally cycle through an array using a button

How can you update an image's source when hovering over it?

Disable the default controls on the Open Layers Bing Map

Is there a way in jQuery to identify if a paragraph contains exactly one hyperlink and no other content?

Troubleshooting issues with sending POST requests in node.js

Mixing success and error states can lead to confusion when using jQuery and Express together

Displaying the final element in an array using v-if nested within a v-for loop

Trigger the function upon successful completion of Stripe Checkout

Executing getJSON requests in perfect synchronization of time

Achieving checked checkboxes based on already selected values in AngularJS

Anticipating the resolution of promises and observables in Angular 2

Removing a Request with specified parameters in MongoDB using NodeJS

An issue occurred while attempting to utilize fs.readFileSync

How can I load data into Vuex store before the application starts?

The magic of Angular's data binding post-ajax retrieval