laravel - Javascript 代码不适用于 vuejs 集成

Question

使用 Vuejs/Laravel 。我使用这个简单的 javascript 代码在刀片中生成图表。

 <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);

当我的 html 表包含 html/php 值时，它可以工作。但是当它是 vuejs 值时，它似乎无法识别数据。这是我的 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 仍然空白 提前谢谢你

标签： laravelvue.js

Answer 1

你会想看看Vue 生命周期。简而言之，Vue 需要一段时间来加载和初始化，这意味着依赖于Vue创建的元素的 Vue之外的 JavaScript 可能会在这些元素完全存在之前执行。

通常，您需要将任何依赖于 Vue 创建的元素的 JS 代码移动到 Vue 应用程序中。