Updating the VueJS DOM when a different value is chosen from the dropdown menu

I am facing an issue with updating the DOM using the following logic:

index.vue [Template Part]

<div>
     <div v-for="obj in objects" :key="obj.id">
           <select v-model="obj.quantity" @change="qtyChange(obj)">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

        <div class="w-1/5">
          <p class=" pt-4 text-right">${{ getObjectPrice(obj) }}</p>
        </div>
     </div>
</div>

index.vue [Script Part]

  <script>
         props['selectedObjs'],
         data () {
               return {
                   objects: []
               }
         },
         mounted: {
                      this.objects = this.selectedObjs
                  },
         methods: {
                     getObjectPrice(obj)
                          {
                                // perform mathematical calculations based on obj.quantity
                                return answer
                          },

                     qtyChange(obj) {
                                   getObjectPrice(obj)
                     }
                  }
  </script>

I have attempted to watch the objects data property, but it is not working as expected. I need to display the updated price of objects depending on the quantity selected from the dropdown. Any recommendations for a more efficient solution would be greatly appreciated.

Answer №1

Save the chosen value in local storage first, then utilize it for any calculations that are needed. It's recommended to utilize the computed property instead of the method property for more efficient computation. Display your computed result in the template.

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

Finding the index of a chosen option in Angular

Attempting to retrieve the index of the selected option from a select element using Angular. The Angular (4) and Ionic 3 frameworks are being utilized. The template structure is as follows: <ion-select [(ngModel)]="obj.city"> <ion-option ...

Is innerHTML incapable of executing JavaScript code?

Experimenting with a new technique where I divide my code into separate files to create multiple HTML pages instead of one large one. Using ajax to load them and then setting the content as innerHTML to a parent div results in clean code that works well in ...

Utilizing Vue JS for applying multiple filters on a single array

I'm currently facing challenges in optimizing my code. I've successfully created dynamically generated objects from an array, implemented a search function, and had a working filter (just one) at some point. However, my attempt to chain the filte ...

The Meteor update is unsuccessful on the Mongo Sub Collection and will not continue

I am currently facing an issue with updating a specific object within an array in my object based on a value. Whenever I try to add the update code, the function gets stuck at that point without proceeding further. None of the console.log calls after the u ...

Utilizing distinct JavaScript, JQuery, or CSS for individual Controllers within the Codeigniter framework

Currently, I am involved in a Codeigniter v3 project where we are developing a comprehensive application for a large organization. To optimize the loading speed of each page, I am looking to integrate custom JQuery and CSS files/code specific to each Con ...

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

Is there a way to retrieve the title, description, and image URL of a URL through Ajax, similar to how Facebook shares a link?

Currently, I am developing a project that involves allowing users to submit a URL. The system will then extract the title, images, and description from the provided URL and offer the option to toggle between different images. Upon submission, these extrac ...

Generating requests using ExpressJS

Is it possible to send a POST request using a GET action? Although everything seems to be working fine, the "TOKEN" does not appear after the post. I am puzzled as to why this is happening. const request = require('request'); exports.g ...

React Apollo Error - When using refetchQueries, data does not re-render in one component but does so in another. Surprisingly, it works when the refetchQueries is in the same

Within my application, there is a Main Component that displays a list of todos. Additionally, the Sidebar Component showcases various products as illustrated below ...

A streamlined method for generating an array containing all numerical string values

I'm looking to generate an array of digits in JavaScript. Currently, I have hard-coded it like this: const digitGeneration = ['0', '1', '2', '3', '4', '5', '6', '7', &apo ...

Guide on sending images as props in a Vue.js component (using Vite instead of require due to compatibility issues)

This is the main component <template> <rooms-card roomImage="../../assets/images/room3.jpg" roomType="Duplex Room" roomDescription="Sami double bed 1 guest room 3 windows" roomPrice="$50/night" /> < ...

Selenium Scrolling: Improving Web Scraping Efficiency with Incomplete Data Extraction

I have been attempting to extract product data from a website that utilizes JavaScript to dynamically render HTML content. Despite using Selenium, implementing scrolling functionality to reach the end of the page, and allowing time for the page to reload, ...

Rejuvenating the v-for loop with a distinct purpose

Currently, I have integrated a jQuery plugin called Slider Pro in my Vue app. However, I encountered an issue when attempting to use the destroy method of this plugin - even after destroying the instance, the HTML classes added by Slider Pro remained in th ...

Navigating through each segment

I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall. My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the ...

Guide on capturing every error thrown in a Vue.JS single-page application

As I develop a web application, my goal is to effectively capture any errors that may occur throughout the entire Vue.js web app. Although I investigated the errorHandler, I discovered that it only catches errors during rendering or watching processes. Th ...

"Unlocking the door: a step-by-step guide to logging in with ajax and json for your hybrid

As a beginner coder, I am currently working on a project to create a mobile web login form using json and ajax. To test my code, I followed the tutorial provided here. This is the code I have developed: <!DOCTYPE html> <html> <head> ...

The pagination feature in vue router is malfunctioning and not functioning as intended

I have successfully implemented a query parameter for changing pages: getProducts(){ this.$router .push({ name: 'products', query: { page: this.page, }, }) .catch(() => {}) ...

The registration feature powered by JQuery is experiencing technical difficulties and not functioning

Having trouble with a registration system on my website at *. When someone registers, it should either show an error message or display "true" if the registration is successful. I have a javascript file (http://pastebin.com/mv9CWZcT) set up to redirect the ...

Text Box Driven Date Selection using Asp.Net's Date Picker Control

I have 2 text boxes that accept dates from a calendar control. One is for the "From" date and the other is for the "To" date. Here's how I would like the dates to be handled: For the first text box (From), it should only allow today's date or an ...

Exploring Nashorn's Global Object Variables Through Access and Intercept Techniques

I recently came across a question called "Capturing Nashorn's Global Variables" that got me thinking. I'm facing limitations when it comes to capturing the assignment of variables to the global object. For example, let's say I evaluate the ...