Javascript 代码不适用于 vuejs 集成答案

【问题标题】：Javascript code isn't working with vuejs integrationJavascript 代码不适用于 vuejs 集成
【发布时间】：2019-05-26 15:11:56
【问题描述】：

使用 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 仍为空白提前谢谢你

【问题讨论】：

我怀疑您的代码在 Vue 之前运行。您希望将您的 JS 移动到 Vue 组件中，因此它仅在数据等全部存在并安装后运行。
哦，是的，你是对的！谢谢！
酷 - 我已经将这个内容充实到一个答案中。

标签： laravel vue.js

【解决方案1】：

你会想看看Vue lifecycle。简而言之，Vue 加载和初始化需要一段时间，这意味着依赖于 Vuecreated 元素的 Vueoutside 的 JavaScript 可能会执行 before这些元素根本存在。

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

【讨论】：