Question

使用Vuejs / Laravel。我使用此简单的javascript代码在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);

当我的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仍为空白预先谢谢

Answer 1

您将要窥视Vue lifecycle。简而言之，Vue需要花一些时间来加载和初始化，这意味着依赖于Vue创建的元素的Vue的JavaScript <外部> 可以先执行这些元素根本存在。

通常，您将想要将所有依赖Vue创建的元素的JS代码移到Vue应用中。

Javascript代码不适用于vuejs集成

1 个答案: