Best method for extracting content from a tag and storing it in a variable in a Vue component

Looking for the best way to capture user-clicked {{exchange}} in a Vue code snippet

<ul>
      <li v-for="exchange in finalExchanges"><button class="resultBtn"> {{exchange}} <hr></button></li>
</ul>

The JavaScript associated with this code looks like this:

export default {
name: 'exchange',
data () {
  return {
    exchanges,
    msg: 'Exchange',
    search: ''
  }
},
computed: {
finalExchanges() {
  return this.exchanges.filter(exchange => {
    return exchange.includes(this.search)
   })
  }
 }
}

What is the most efficient way to capture the {{exchange}} that a user clicks on and store it in a variable? Possible options include using document.getElementById() or a Vue-specific method. However, I am seeking a solution that is not only efficient but also future-proof. Your insights are greatly valued!

Answer №1

If you have a variable in your data called "selectedExchange" and you want to assign the clicked exchange to that variable, you can simply add this line to your button:

<button @click="selectedExchange = exchange"...>

From my understanding of the issue, this is the most common and efficient way to capture the clicked exchange.

If you want to use the clicked exchange as a variable in a method, you can do so by adding this line to your button:

<button @click="someFunction(exchange)"...>

Then, in your method, you can access the clicked exchange like this:

...
methods: {
  someFunction: function( ex ) {
    ... // ex will represent the clicked exchange
  }
}

Answer №2

This solution seems like the way to go. Start by including a currentExchange variable in your data if you want to keep track of it

data () {
 return {
  exchanges,
  msg: 'Exchange',
  search: '',
  currentExchange: null
}

}

Next, set up an event handler on the button where you pass the current exchange value

<button class="resultBtn" v-on:click="handlerFunc(exchange)"> {{exchange}}<hr></button>

Just be aware that v-on:click can be written as @click

Finally, implement your logic in the handler function

methods:{
handlerFunc(exchange) {
  // store it in data if necessary
  this.currentExchange = exchange
  // do whatever you need to...
} 

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

Obscure Promise Structure - Accomplish, Flop, Achieved

I came across the following code block and I'm struggling to understand it. While I have a good grasp on promises in the context of: deferred.then(successCb, errorCb); This code snippet appears to have three callbacks (complete, fail, done>) whic ...

Transfer information(text) to the clipboard using Vue (Nuxt js)

When the vs-button is clicked, I want the value of single_download_link.pdfId to be copied to the clipboard. I attempted it like this, but it did not work. I do not want to use the v-clipboard node module. Can someone please assist me with this? Thank you. ...

Is it possible to use a JavaScript string as a selector in jQuery?

So, my issue is with the following JavaScript code snippet: for ( i=0; i < parseInt(ids); i++){ var vst = '#'+String(img_arr[i]); var dst = '#'+String(div_arr[i]); } I'm wondering how I can proceed in jQuery to handle ...

What is the method for acquiring the final shape of a particular type?

Is there a way to locate the last path or circle in a paper so that I can perform additional calculations to add more elements? Currently, calling paper.bottom only retrieves the last element. Is it possible to access shapes of specific types, like bottom. ...

NodeJS application does not acknowledge the term "Require"

I have completed the steps outlined on http://expressjs.com/en/starter/installing.html to set up my express NodeJS application. Following the installation, we navigated to the "myapp" directory and installed the "aws-iot-device-sdk" from https://github.com ...

Increasing numerical section of text with JavaScript

Is there a way to increment the numeric part at the end of a string in JavaScript when certain actions occur? For example: var myString = 'AA11111' increaseStringValue(myString) # Updated value of myString => 'AA11112' Additional ...

Passing props from pages to components in NextJS: A guide

My nextjs-application has a unique folder structure: components -- layouts --- header.tsx --- index.tsx pages -- index.tsx -- [slug].tsx In the [slug].tsx file, I utilize graphql to fetch data and set the props accordingly: export default ...

The CLI feature is not compatible with NextJS Drizzle-Kit

I'm currently utilizing the drizzle auth template and attempting to customize it for Role Based Authentication. I've made adjustments in the db.ts file to incorporate roles. import { drizzle } from 'drizzle-orm/postgres-js'; import { pg ...

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...

Why does the jQuery hide function fail to work on a div with the same class after an ajax

1. I'm encountering an issue with my code. I have a div class "inner" which is being dynamically loaded via an ajax call. However, after the ajax call, if I click the hide button, it doesn't work. Strangely, it was working perfectly fine before ...

What strategies can I implement to improve the performance of this Vue checktree composable during refactoring?

I am currently working on creating a Vue 3 composable to build a headless recursive checkbox tree view. The checktree is designed to only select leaf nodes, with the state of internal nodes being determined by the number of selected leaf nodes. If you wan ...

The PUT rest service does not function in AngularJS version 1.0.8

I am facing an issue with my AngularJS application that has a CRUD Rest service. While the Create, Read, and Delete methods are functioning properly, the PUT method is not working. I have searched on Stackoverflow and found similar problems with accepted s ...

Achieving the Date format in electron with JavaScript

Is there a way to determine the date format currently being used on the device? For example, if I call a specific function, could it provide me with the current format? var dateFormat = getDateFormat(); console.log(dateFormat); MM/dd/YYYY Does anyone hav ...

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...

Having difficulty updating the state with editorState retrieved from the server in ReactJs when using draftJs

Incorporating a rich text editor into React using draftJs has been successful. The editorState data is converted to raw data, stringified, and sent to the server for rendering on the front end. However, I am facing challenges in updating the editorState ...

Error: ResizeObserver is not defined when using Gatsby with nivo charts

I incorporated @nivo/pie using "gatsby": "^3.13.0", but encountered an error during the gatsby build process. WebpackError: ReferenceError: ResizeObserver is not defined. The version of Nivo being used is "@nivo/pie": "^0 ...

Tips for transferring information from the isolate scope to the parent scope

As a newcomer to AngularJS, I am exploring the creation of directives and how to invoke functions from the parent scope within them. While I have successfully achieved this, I am now grappling with the challenge of passing data from the isolate scope via a ...

Is there a way to seamlessly transition to a new scene or page in my project while still having the option to easily navigate back to the previous

This is just the beginning of a series of scenes that I have in mind. As I move on to scene 2, I realize that my current method of fading to black and loading a new html file is becoming monotonous. I am looking for a more creative approach where the user ...

Locate the index of an item within an array of objects based on a matching property in the

My current situation involves having an array of objects structured like this : [ {label: "<p>Opacity | %<br/></p>", customRow: false, id: 0, items: Array(13)}, {label: "Brand_hs_id", customRow: false, id: 0, items: A ...

Choose a specific value from a drop-down menu

Looking for a solution with this piece of code: $('#Queue_QActionID').change(function () { if ($(this).val() == '501' || $(this).val() == '502' || $(this).val() == '503' || $(this).val() == '504' || $( ...