Ways to assign the output of a function to a variable in JavaScript

I am looking to update the value of my function to a variable.

As an example, I have the following:

<input v-model="search.steering" @input="onChange('steering')"/>

This means that I want to insert the steering every time I input text.

Here is the function:

onChange(typemember) {
  this.search.typemember
}

What I am doing here is adding the value of typemember to the this.search variable.

So now the JavaScript variable will look like this: this.search.typemember. The value of typemember is pulled from @input="onChange('steering')".

In this case, the variable will be: this.search.steering. Is this possible or is there another way to achieve this?

By the way, I am using Vue here.

Answer №1

In order to dynamically access the property this.search.steering using typemember, you can simply use square brackets like this:

this.search[typemember]

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

Using an alias to call a function defined in a separate module in TypeScript

The following code snippet is from the v4.js file located inside the uuid folder within Angular's node_modules: var rng = require('./lib/rng'); var bytesToUuid = require('./lib/bytesToUuid'); function v4(options, buf, offset) { ...

Error in React Material UI: 'theme' variable is not defined - no-undef

In the process of developing a basic React application with material-ui, I am incorporating MuiThemeProvider and ThemeProvider for themes. App.js import React from 'react'; import { createMuiTheme, MuiThemeProvider } from '@material-ui/co ...

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

What is the best way to send a parameter to the callback function of a jQuery ajax request?

I am facing an issue where I need to pass additional variables to a jQuery ajax callback function. Consider the following scenario: while (K--) { $.get ( "BaseURL" + K, function (zData, K) {ProcessData (zData, K); } ); } func ...

Highcharts-ng allows us to create charts without using the traditional syntax such as $('#container').high

After setting up the chart's configuration in my controller, I am facing an issue. The HighCharts-ng (an angularJS directive for HighCharts) has a method that I want to implement: $scope.ohlcChartConfig = { options: {....... I ne ...

Tips for creating a sticky bootstrap column that remains in place as you scroll

I am looking to design a FAQ page similar to Twitter's FAQ. The goal is to have the left column remain fixed in its position while allowing users to scroll through the content. Here is what I have attempted so far, but it is not functioning as expect ...

Error Found: Unexpected Colon (:) in Vue TypeScript File

Important Update: After thorough investigation, it appears that the issue is directly related to the boilerplate being used. As a temporary solution, it is recommended not to extract the TypeScript file but keep it within the .vue file for now. In a sim ...

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in

I am working with a React JS code page that looks like this: import React, { useState } from "react"; import { Auth, API } from "aws-amplify"; function dailyFiles(props) { const [apiError502, setApiError502] = useState(false); // Extracted into a re ...

What is the optimal location for storing JSON data while dynamically loading via AJAX?

Let's imagine a scenario where there is an HTML page hosting a dynamic modal box. Clicking on different links within the page triggers the modal to open, each showing different content based on the clicked link. The dialog contents are fetched using A ...

When utilizing npm install buefy and npm install font-awesome, there may be an unnecessary display of [email protected] and [email protected] extraneous errors

After installing buefy and font-awesome, I noticed that it is marked as extraneous and the folder appears with an arrow icon but is empty. How can this issue be resolved? For example: +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

What is the best way to add randomness to the background colors of mapped elements?

I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?

I have created a Typescript library that I plan to use in various NodeJS projects. The source code is included in the NPM package, so when I install it in my projects, the source also gets added to the node_modules folder. Now, during debugging, I want to ...

The IDs and classes of HTML elements

I have two different implementations of a livechat script. On my sandbox site, the livechat is fixed to the bottom right of the page and scrolls with the window. However, on my live site (where this specific code comes from), it is attached to the footer. ...

What exactly does Vue 3 offer with its Class-Based API, Function-Based API, Reactivity API, and Composition API?

As I delved into the world of Vue 3, I came across various concepts: Object-based API Function-based API Class-Based API Composition API Options API Reactivity API Could someone provide definitions for these? Updated in 2021 I also included Options API ...

error message: The file you are trying to access does not exist due to the

I seem to be facing an issue with my package.json file. I am trying to include a new "command" in a correctly written package. Specifically, I am looking to add a command that will load test data, so I updated the scripts section as follows: "load-test-da ...

Differences Between Using WebDriver click() and JavaScript click()

The Scenario: Within the realms of StackOverflow, instances have been observed wherein users encounter difficulties clicking on an element through selenium WebDriver's "click" command. As a solution, they resort to using a JavaScript click by executi ...

Remove a specific item from a MongoDB Collection using its ID

I have a MongoDB collection named "Members" which stores data for each member including first name, last name, and an autogenerated Object ID. I am able to retrieve the data using ExpressJS and display it with VueJS. While my get and post methods are worki ...

Building a static website with the help of Express and making use of a public directory

It seems that I am facing a misunderstanding on how to solve this issue, and despite my efforts in finding an answer, the problem persists. In one of my static sites, the file structure is as follows: --node_modules --index.html --server.js --app.js The ...

Transferring data from a database on Express back-end to a React front-end

I am facing an issue while trying to display user information on the front-end. Even though I can access the server using localhost:8080/api/user and see the information in the form of an empty page, my content page is unable to render this data. The code ...

Adding Typescript to a Nativescript-Vue project: A step-by-step guide

Struggling over the past couple of days to configure Typescript in a basic template-generated Nativescript-Vue project has been quite the challenge. Here's my journey: Initiated the project using this command: ERROR in Entry module not found: Erro ...