Retrieve an item from a table in VUE upon clicking

I am currently using Vue Bootstrap and I want to be able to access the item when a row in the table is clicked.

I have set up a table and a clickmeRow method to handle the action on the clicked item.

<b-table-lite 
        hover
        :items="items"
        @row-clicked="clickmeRow(item)"
    />

Here is the method that I have created:

clickmeRow(item) {
  console.log(item)
}

However, when I click on a row, it shows 'undefined' in the console.

Can someone please assist me in retrieving the item from the table after clicking?

javascriptvue.js

Answer №1

The function is not returning undefined because you are calling it inside the template using the item variable, which is undefined. The item is automatically passed to the method, so all you need to write is 

@row-clicked="clickmeRow"

For more information, visit: 

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  methods: {
    onRowClicked(item, index, event) {
      console.log("Index", index)
      console.log("Item", item);
    }
  }
})
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e3f9e2f9e4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5838090b5c7dbc3dbc4c7">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d7671767063722f74776742302c30332c30">[email protected]</a>/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table-lite :items="items" @row-clicked="onRowClicked"></b-table-lite>
</div>

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

Challenge in backward compatibility when converting from .on() to .live()

Struggling to make hammer.js work with an outdated 1.6 jQuery in my CMS. The function "on()" isn't available, so I have to use "live()". Here are the two instances: 1. var hammertime = new Hammer(element[0], { drag_lock_to_axis: true }); hammertime. ...

javascriptjquery

Having trouble submitting the form in ExpressJS - error encountered

Currently, I am in the process of learning ExpressJS and I have encountered an issue while trying to implement the login functionality. Whenever I attempt to submit the form using the POST method, I receive the following error message: "Cannot POST /login" ...

javascriptmysqlexpress

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

javascripthtmlcssnull

Struggling to incorporate Three.js into a Vue project utilizing modules

Incorporating TrackballControl.js from the example folder of the npm package for Three.js into my Vue project using Webpack has been a challenge. After researching, I stumbled upon this helpful solution on Github. https://i.sstatic.net/KqSF6.png To imple ...

webpackvue.jsthree.js

The execution of a function in PHP is determined by the data passed from Angular

I've encountered a new challenge while working on web development and would greatly appreciate some assistance. Currently, I have several buttons that need to execute different functions when clicked, such as ng-click='loadA', ng-click=&apos ...

javascriptphpjqueryangularjs

Tips for retrieving sent data from a jQuery Ajax request on XHR error

I am facing a situation where I have numerous jQuery AJAX requests being sent using a single function. function sendData(data){ $.post("somepage", {"data": data}, function() {}, "json") .fail(function(jqXHR, textStatus, errorThrown){ sendD ...

javascriptajaxjquery

Automated Menu Selection using Selenium

I'm currently facing a challenge in writing a Python script using Selenium to interact with a webpage. I am struggling to use the .click() method to select an expandable list on the page. Despite successfully logging in and navigating to the desired p ...

javascriptpythonselenium

Is it feasible to modify the supplied data through provide->inject from the child component in Vue3?

Explained in the heading, In Vue.js, The 'provide' function is utilized to transfer data from parent component to child component. The child component receives this provided data by using the 'inject' function. Similar to how @emit ...

vue.jsstatedata-visualization

Troubleshooting Issue with jQuery onclick Function not Transmitting Data

Why is this error occurring: Uncaught TypeError: Object [object global] has no method 'data' HTML: $attributes = array('class' => 'main post', 'onsubmit' => 'validateModules(event)', 'dataid& ...

javascriptjqueryajax

W3C Validation with a Dynamic Twist

I currently have a small feature on my website that indicates the validity of the markup for the current page. It is currently set as "HTML5 Valid", but I am thinking about making it more dynamic. I want it to automatically check if the page's markup ...

phpjavascriptvalidationw3c

Looking to halt navigation in a Chrome browser immediately after performing a click action with Selenium?

Is there a way to prevent the browser from loading immediately after a click event? Are there any workarounds or JavaScript implementations for achieving this? ...

javascriptseleniumselenium-webdriver

Execution of Ajax call fails to occur synchronously

I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...

javascriptjqueryhtmlajaxperformance

Merge JavaScript files from various folders using grunt's configuration settings

I am currently working with Grunt and Sass, and I am in search of a SASS-like feature that will allow me to import any JavaScript file I desire and merge them into a single file based on some configuration depending on the directory I am in. For instance, ...

javascriptgruntjsnpmminify

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

--- Component 1--------------- <div> <li><a href="#" (click)="getFactsCount()"> Instance 2 </a></li> However, the getFactsCount() function is located in another component. I am considering utilizing @output/emitter or some o ...

javascriptangulartypescriptangularjs-directive

Calculate how frequently an element showcases a particular style

I attempted to tally the occurrences of a specific class on an element, but I keep encountering the error message: $(...)[c].css is not a function Does jQuery have it out for me? Below is the code snippet in question: // hide headings of empty lists le ...

javascriptjqueryfor-loop

establish the data type for the key values when using Object.entries in TypeScript

Task Description: I have a set of different areas that need to undergo processing based on their type using the function areaProcessor. Specifically, only areas classified as 'toCreate' or 'toRemove' should be processed. type AreaType ...

javascripttypescript

unable to update database using jquery ajax

Hello everyone, this is my first time posting on Stackoverflow! I am facing an issue while trying to run an "Insert" query using Jquery's $.ajax function. Upon checking the network tab on Chrome Dev Tools, it seems like my file is being loaded but th ...

javascriptphpjqueryajax

Why is the script from URL "http://.../js/myscript.js" not executing as expected after being fetched?

Is it possible to have the server run a JavaScript file specified in a URL, such as "http://.../js/script_name.js", and return the result instead of just displaying the source code? I am assuming that the server is using node.js. ...

javascriptnode.js

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

What is the best way to upload multiple files using ASP.Net and Jquery?

On my aspx page, I have included the following JavaScripts... <script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="jquery.MultiFile.js" type="text/javascript"></script> In addition, I have inserted the follo ...

c#javascriptjqueryasp.netfile-upload