Javascript code isn't working with vuejs integration

Question

using Vuejs/Laravel .I use this simple javascript code to generate a chart in blade.

 <script>
  function getData(columnOrder, keyName) {
  var obj, table = $("#t4"), array = [];
  table.find('tbody tr').each(function() {
  var rows = $(this).find('td:nth-child(' + columnOrder +')');
  rows.each(function(){
    obj = {};
    obj[keyName] = $(this).text();
    array.push(obj);
  });
  });
  return array;
  }

  var categories = getData(1, 'label');
  var datas = getData(2, 'value');
  console.log(categories);
  console.log(datas);

It works when my html table contain html/php values. but when it's vuejs values, it's seems not recognizing data.. Here is my table with vuejs.

 <table class="hidden" id="t4">
 <thead>
 <tr>
   <th scope="col">a</th>
   <th scope="col">b</th>
 </tr>
 </thead>
 <tbody>
 <template v-for="person in personsWithAmount">
 <tr>
   <td scope="row" >@{{person.user.name}}</td>
   <td scope="row">@{{person.totalAmount}}</td>
 </tr> 
 </template>      
 </tbody>
 </table>

Console.log still blank Thank you in advance

I suspect your code is running before Vue does. You'd want to move your JS into the Vue component, so it only runs once the data etc. is all present and mounted. — ceejayoz
– ceejayoz, Commented Dec 28, 2018 at 21:49

tony19 · Accepted Answer · 2022-07-16 02:42:43Z

1

You'll want to take a peek at the Vue lifecycle. In short, Vue takes a while to load and initialize, which means that JavaScript outside of Vue that relies on elements created by Vue may execute before those elements exist at all.

Generally, you're going to want to move any JS code that relies on Vue-created elements into the Vue app.

edited Jul 16, 2022 at 2:42

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 28, 2018 at 22:01

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript code isn't working with vuejs integration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related