VueJs: Finding the corresponding value of a data object

Is there a way to extract data from an object in Vue?

This is the format of my data:

datasets: [{
 text:"Cars",
 value: "[1,2,3]" 
},
{
 text:"Trains",
 value: "[1,4,10]
}
]

When I receive information from route props like this:

this.selectedText= this.$route.name;

Where this.$route.name might be "Cars", for example. I want to use this.selectedValue to retrieve the corresponding Value from this array: so if this.selectedText="Cars", then this.selectedValue=[1,2,3], and so on based on the selected text.

Answer №1

To discover the corresponding item, develop a function and apply this script.

function findMatchedValue() {
    let matchedData = this.dataSets.find(element => element.text == this.chosenText);
    if(matchedData !== undefined) {
        this.foundValue = matchedData.value;
    }
}

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

Sending information in Json format back to an Ajax request

I have a method in the Model-View-Controller (MVC) framework where I submit data and expect to receive some processed data back. The MVC method I am posting to returns JSON data. [HttpPost] public JsonResult GetCalculateAmortizationSchedule() { var da ...

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

Unable to perform navigation during page load in a React.js application

I attempted to navigate to a route that should redirect the user back to the homepage when postOperations isn't set in the localStorage. To save time, please review the code snippet focusing on the useEffect and the first component inside return(). im ...

Dealing with errors when working with cross-domain JSONP requests in jQuery can be a

My attempts to capture a bad request error using my jquery code have been unsuccessful. $.get('http://example.com/', {}, function () {}, 'jsonp') .done(function () { // never fires }) .fail(function () { // never fires }) .a ...

Navigating with React-router can sometimes cause confusion when trying

I'm having trouble with my outlet not working in react-router-dom. Everything was fine with my components until I added the Outlet, and now my navigation component isn't showing even though other components are rendering. import Home from ". ...

What is the best way to extract the numerical value from a JavaScript object?

I'm currently working on a web form for a currency exchange demonstration. I have included a snippet of HTML and Javascript code that I have initially implemented. <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

What is the process for refreshing information in VueJS?

<script> export default { data() { return { data: {}, dataTemp: {} } }, methods: { updateData() { let queries = { ...this.$route.query } this.data = { ...this.data, pID: queries.pid, s ...

"Enjoy a unique browsing experience with a two-panel layout featuring a fixed right panel that appears after scrolling

I am facing difficulty in designing a layout with two panels where the left panel has relative positioning and the right panel becomes fixed only after a specific scroll point. Additionally, I need the height of the right panel to adjust when the page scro ...

Displaying an array using Javascript that contains variables along with HTML code

First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...

The live updates for user data in Firestore are not being reflected immediately when using valueChanges

Utilizing Angular and Cloud Firestore for my backend, I have a setup where users can follow or unfollow each other. The issue arises when the button text and list of followers/following do not immediately update on the front end after a successful click ev ...

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

Vertical alignment of buttons in Cordova App Rate

Currently, I am utilizing phonegap along with the app rate plugin. When I execute the code: AppRate.promptForRating(true); All buttons are appearing in a singular line. Despite there being 3 buttons available, the text on the buttons is getting truncate ...

How can I access a PHP variable from an external .php file within a JavaScript script?

I have recently implemented a JavaScript code called "upload.js" for uploading files to my server: function beginUpload(){ document.getElementById('upload_form').style.visibility = 'hidden'; return true; } function endUpload(s ...

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

Ensuring the safety of PHP JSON output results on a web server

I am currently developing an app using phonegap that submits and retrieves data from a MySQL database hosted on a server (website). I have successfully implemented the data submission and retrieval features in the app. The data is fetched through AJAX fro ...

Is there a way to update a todo list on the same input field where I initially added it in a React application?

I am new to using React js and currently working on a project that I found on YouTube. The issue I am facing is related to editing tasks - I would like to be able to edit them within the same input field where I add tasks. Unfortunately, I am not sure how ...

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

Using Node.js to return JSON data containing base64 encoded images

In my database, I store all images as base64 with additional data (creation date, likes, owner, etc). I would like to create a /pictures GET endpoint that returns a JSON object containing the image data, for example: Image Data [{ "creation": 1479567 ...