Vue JS - accessing and extracting data from JSON sources

I am currently working on a small billing application and I am facing difficulties with the cost lookup feature. I have gone through the Vue.js documentation but it didn't provide much help.

This is a snippet of my code:

<tr><td><input type="text" v-model="prod0"></td><td><input type="number" v-model="qty0"></td><td>{{total0=cost0*qty0}}</td></tr>

My main goal is to extract the cost of a product based on the id entered by the user in prod0, by looking up this information from a JSON object.

The structure of my JSON data is as follows: { "Mango":"100", "Tomato":80, "Carrot":"120" };

I would greatly appreciate it if someone could guide me with a JSFiddle example or reference on how to effectively perform a JSON lookup, cross-reference the data, and retrieve the exact cost associated with a given product name.

javascriptvue.js

Answer №1

To implement this functionality:

{{totalCalculation = products[productIndex] * quantity}}

When setting up your Vue instance:

new Vue({
  ...
  data: {
    products: { Apple: 50, Banana:30, Orange: 70 },
    productIndex: '',
    quantity: 0
  }
})

It is advisable to use a computed property instead, simplifying the template further:

{{totalAmount}}

In the Vue instance, handle cases where no matching product is found by returning 0:

computed: {
  totalAmount () {
    if (!this.products[this.productIndex]) return 0
    return this.products[this.productIndex] * this.quantity
  }
}

View a working example here: http://codepen.io/CodinCat/pen/JEGZgB?editors=1010

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

The scroll depth provided by the overflow:scroll; property is insufficient

When using the CSS overflow:scroll; property, I noticed that there is a limitation on the scrolling depth. It seems that the scrollbar doesn't scroll far enough to reveal all the hidden data. If you are interested in checking out the code on my Githu ...

javascripthtmlcssoverflow

Passing a variable by copy in a done call with Ajax

Here's the code snippet I'm working with: for (var i = 0; i < list.length; i++) { $.when( $.ajax({url: "./dorequest.php?id=" + list[i], success: function(response){ jsonFriendlist = response; }}) ).done( ...

javascriptajax

A guide on transferring a Vue component to a custom local library

After successfully creating components using template syntax (*vue files), I decided to move common components to a library. The component from the library (common/src/component/VButton): <template> <button ... </button> </templat ...

javascriptvue.js

Utilizing Jquery to add a delay and animate the sliding up effect on a recently created element

I am looking to apply a slide-up effect to a newly created element after a specified delay. $("div[data-error='true']").delay(5000).slideUp(500, function () { $("#error-alert").remove(); }); $("div[data-success='true']").delay(5000 ...

javascriptjquery

Issue encountered with the DevExtreme npm module: Uncaught TypeError - $(...).dxButton is not recognized as a function

Instructions for installing DevExtreme npm can be found on their official page here: https://www.npmjs.com/package/devextreme var $ = require('jquery'); require('devextreme/ui/button'); var dialog = require('devextreme/ui/dialog&a ...

javascriptjquerynpmwebpackdevextreme

What is the best way to create a point within a mesh?

I have several meshes and I'd like to insert a point randomly within the confines of hexagon[0]. How can this be achieved? var Hexagon=new Array(); Hexagon[0] = new THREE.Mesh( HexagonExtrude[0],material[0] ); Hexagon[1] = new THREE.Mesh( HexagonExtr ...

javascriptthree.js

Using the OR notation to declare the property name with 2 types is not functioning as expected for me

I'm having trouble with this solution. Here is the link to the source: Is it possible to declare a property with multiple types using the OR notation like this? export interface OnboardingSchoolModel { level?: string | number; school?: stri ...

javascriptangulartypescriptionic4

Unable to locate FFmpeg on the root server for Discord JS v13

After setting up my DiscordJS Bot on a new rootserver, I transferred all the files and launched the bot. Everything seemed to be working fine until I tried to run a command that involved the bot joining a voice channel and playing audio. At this point, an ...

javascriptnode.jsffmpegdiscorddiscord.js

presentation not visible at first

I'm facing an issue with adding a slideshow to the header of my website. When the page initially loads, the slides do not appear; instead, I see the dots and arrows positioned higher than they should be. However, when I click on a dot or the "next pag ...

javascripthtmlcsssliderslideshow

I'm trying to create a drop-down list in JS that will save selected options to a database using PHP. I'm feeling a bit lost, anyone

My goal is to upload a pdf file with specific options that determine its category. The challenge arises when creating multiple options, as the second option depends on the first choice and involves JavaScript functionality for which I am unsure how to stor ...

javascriptphp

Utilize mapGetter and mapMutations in Vuex with TypeScript without the need for class-style components syntax

After completing a project in Vue, I found myself getting a bit confused without static types. To address this, I decided to incorporate TypeScript into my project while still maintaining the traditional way of writing code, without classes and decorators. ...

typescriptvue.jsvuexstore

Button appears and disappears sporadically while browsing in Safari

I created a slider using SCSS, JavaScript, and HTML. You can view the demo at this link: https://jsfiddle.net/rr7g6a1b/ let mySlider = { initializeSlider: function (options) { let slider = options.container; let slides = slider.querySelectorAll( ...

javascriptcssmacossafarisass

Utilizing a personalized service within an extended RouterOutlet component in Angular 2 for streamlined authentication

In my quest to establish authentication in Angular 2, I turned to an insightful article (as well as a previous inquiry on SO) where I learned how to create a custom extended RouterOutlet: export class LoggedInRouterOutlet extends RouterOutlet { public ...

javascriptangularangular2-routingangular2-services

ReactJS is giving me an error message: "Uncaught TypeError: Unable to access property 'ownerDocument' since it is null."

Trying to create a bar chart using D3 and render it with React's render method. Below is my index.js file: import React from 'react'; import ReactDOM from 'react-dom'; import './Styles/index.css'; import BarChart from &a ...

javascriptreactjsd3.jswebpackwebpack-dev-server

Unlocking the potential of dynamic variables in next JS with config.json

I want to create a config.json file where I can store variables like a title, color hex code, and more for my web app. In my Next.js web app, I need the configuration to be loaded before mounting its components. Additionally, I would like to have a setting ...

javascriptreactjsnode.jsnext.jsnext.js13

Exploring the Power of Pythons, Selenium, and XPATH for Handling New Windows

Is it possible to retrieve an element through XPath after using the .click() method when that element is located within a section of JavaScript known as BODY_BLOCK_JQUERY_REFLOW and appears only after the click action? I am attempting to access this speci ...

javascriptpythonseleniumxpathselenium-chromedriver

Iterating over images and displaying them in Laravel's blade templating engine, updating outdated Angular code

Currently, I am in the process of transitioning an Angular repeat function used for displaying images on our website (built with Laravel). The goal is to eliminate Angular completely and handle everything using Laravel loops in the blade template. I have ...

javascriptphpangularjslaravel

What is the best way to send the input text to the filter component in my React application?

I am currently working on developing an application utilizing the "Rick and Morty API" to display a list of characters with various attributes such as gender, alive status, images, etc. My main goal is to implement a search bar that allows users to search ...

javascriptrreactjsrestapi

Picking the following div using a button and updating its content

I am currently working on a project that involves 4 div elements, each with its own value (for example: 0). There is also a button with plus and minus functionality to change the values in each box. Additionally, there is a "set next" button to move on to ...

javascriptjqueryhtmlcss

Why might the MIME type 'application/json' be refused when the dataType is JSON?

Is it true that if the dataType is set to JSON in jQuery, it expects a JSON response? I found http://api.jquery.com/jquery.ajax/ to be informative on this topic. In the following function, I have experimented with specifying both no dataType (for jQuery&a ...

javascriptjqueryajaxjson