How to access table data using jquery within Vue.js method

Question

Here is my basic table within laravel blade file

Each edit button calls a vue method when clicked

 <types-page inline-template>
   <div>
                <!-- table -->
                <table id="choose-address-table" class="ui-widget ui-widget-content">
                    <thead>
                    <tr class="ui-widget-header ">
                        <th>Name/Nr.</th>
                        <th>Street</th>
                        <th>Town</th>
                        <th>Postcode</th>
                        <th>Country</th>
                        <th>Options</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="nr"><span>50</span>
                        </td>
                        <td>Some Street 1</td>
                        <td>Glasgow</td>
                        <td>G0 0XX</td>
                        <td>United Kingdom</td>
                        <td>
                            <button type="button" @click="edit()">edit</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="nr">49</td>
                        <td>Some Street 2</td>
                        <td>Glasgow</td>
                        <td>G0 0XX</td>
                        <td>United Kingdom</td>
                        <td>
                            <button type="button" @click="edit()">edit</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
   </div>
 </types-page>

Here is the vue component

It handles the edit() method. The method fires ok as ive tested that

Im trying to use jquery to select the data and log each row in the hard coded table

i want to be able to access log the data in each row

Its the jquery selectors that cant seem to target the table

<script>
export default {
    name: "types-page",
    data() {
        return {
            typeError: false
        }
    },
    methods: {
        edit() {

            var $row = $(this).closest("tr");    // Find the row
            var $text = $row.find(".nr").text(); // Find the text

            console.log($text)
        }
    }
}
</script>

The console log is just blank when i run click on this method.

Thank you in advance for whoever helps me out

Couldn't you just pass the "nr" as parameter to edit(), like @click="edit(49)", @click="edit(50)"? — user8034901
– user8034901, Commented May 16, 2021 at 19:10
You aint utilizing vue the right. There is almost no need to use jquery with vue, specifically in your case. Just store the table's data in an array of objects, build your table with v-for and pass the index of each row to edit() as brombeer mentioned — Liro Dasmaz
– Liro Dasmaz, Commented May 16, 2021 at 19:34

mrhn · Accepted Answer · 2021-05-16 19:48:42Z

You already using Vuejs why not use the data binding Vuejs provides. Don't use Jquery, generate the table with v-for and on each button pass the data to the method you need it. If done this way, you do not need to find it again with Jquery.

Created the example on JSFiddle.

I have made an example to generate a simpler version of what you want. Use v-for for each row and pass the address data to the edit() funciton.

<div id="app">
    <table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
        </tr>
   </thead>
   <tbody>
       <tr v-for="address in addresses" :key="address.street + address.number">
           <td>
               {{ address.number}}
           </td>
           <td>
               {{ address.street}}
           </td>
           <td>
             <button type="button" @click="edit(address)">edit</button>
           </td>
       </tr>
   </tbody>
</div>

The Vuejs where i made some example data.

new Vue({
  el: "#app",
  data: {
    addresses: [
      { street: "Pensylvania avenue", number: 1 },
      { street: "Pensylvania avenue", number: 2 },
      { street: "Pensylvania avenue", number: 3 },
    ]
  },
  methods: {
    edit: function(address){
        console.log(address);
    }
  }
})

Mark Schultheiss · Accepted Answer · 2021-05-16 19:41:45Z

I am not a vue.js expert but maybe this will get you started given your request:

var example1 = new Vue({
  el: '#choose-address-table',
  data: {
  //  return {
  //    typeError: false
  //  }
  },
  methods: {
    edit: function(event) {
      console.log('here');
      var t = event.target;
      console.log("what e:", event.target);
      var $row = $(t).closest("tr"); // Find the row
      var $text = $row.find(".nr").text(); // Find the text
      console.log($text);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<types-page inline-template>
  <div>
    <!-- table -->
    <table id="choose-address-table" class="ui-widget ui-widget-content">
      <thead>
        <tr class="ui-widget-header ">
          <th>Name/Nr.</th>
          <th>Street</th>
          <th>Town</th>
          <th>Postcode</th>
          <th>Country</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="nr"><span>50</span>
          </td>
          <td>Some Street 1</td>
          <td>Glasgow</td>
          <td>G0 0XX</td>
          <td>United Kingdom</td>
          <td>
            <button type="button" @click="edit">edit</button>
          </td>
        </tr>
        <tr>
          <td class="nr">49</td>
          <td>Some Street 2</td>
          <td>Glasgow</td>
          <td>G0 0XX</td>
          <td>United Kingdom</td>
          <td>
            <button type="button" @click="edit">edit</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</types-page>

Collectives™ on Stack Overflow

How to access table data using jquery within Vue.js method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related