Edge + vue partially works :-/

Hey Guys, I’m trying to set up an edge component for some tables that use Vue.js

It partially works. The only thing it doesn’t load is what’s inside data: {rows ....} the methods and pagination works. Does anybody have any idea how I can make this work properly?

here is my code

in folder components/table.edge:

<div id="sixthTable">
   <table>
     <thead>
       <tr>
         <th v-for="col in columns" v-on:click="sortTable(col)">{{col}}
           <div class="arrow" v-if="col == sortColumn" v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
         </th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="row in get_rows()">
         <td v-for="col in columns">{{row[col]}}</td>
       </tr>
     </tbody>
  </table>
  <div class="pagination">
    <div class="number"
         v-for="i in num_pages()"
         v-bind:class="[i == currentPage ? 'active' : '']"
         v-on:click="change_page(i)">{{i}}</div>
  </div>
</div>


<script>
    var sixthTable = new Vue({
 el: '#sixthTable',
 data: {
   currentPage: 1,
   elementsPerPage: 4,
   ascending: false,
   sortColumn: '',
   rows: [
     { id: 1, name: "Chandler Bing", phone: '305-917-1301', profession: 'IT Manager' },
     { id: 2, name: "Ross Geller", phone: '210-684-8953', profession: 'Paleontologist' },
     { id: 3, name: "Rachel Green", phone: '765-338-0312', profession: 'Waitress'},
     { id: 4, name: "Monica Geller", phone: '714-541-3336', profession: 'Head Chef' },
     { id: 5, name: "Joey Tribbiani", phone: '972-297-6037', profession: 'Actor' },
     { id: 6, name: "Phoebe Buffay", phone: '760-318-8376', profession: 'Masseuse' }
   ]
 },
 methods: {
   "sortTable": function sortTable(col) {
     if (this.sortColumn === col) {
       this.ascending = !this.ascending;
     } else {
       this.ascending = true;
       this.sortColumn = col;
     }

     var ascending = this.ascending;

     this.rows.sort(function(a, b) {
       if (a[col] > b[col]) {
         return ascending ? 1 : -1
       } else if (a[col] < b[col]) {
         return ascending ? -1 : 1
       }
       return 0;
     })
   },
   "num_pages": function num_pages() {
     return Math.ceil(this.rows.length / this.elementsPerPage);
   },
   "get_rows": function get_rows() {
     var start = (this.currentPage-1) * this.elementsPerPage;
     var end = start + this.elementsPerPage;
     return this.rows.slice(start, end);
   },
   "change_page": function change_page(page) {
     this.currentPage = page;
   }
 },
 computed: {
   "columns": function columns() {
     if (this.rows.length == 0) {
       return [];
     }
     return Object.keys(this.rows[0])
   }
 }
});
</script> 

This is where i want my component

`@section('content')

<h1> New Page </h1>
@!component('component.table')
@endsection`

this is my main layout

`<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  {{ style('style') }}

  @!section('extracss')

  <title>
    @!section('title')
  </title>
{{ script('https://cdn.jsdelivr.net/npm/vue/dist/vue.js') }}
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
</head>
<body>
  @include('inc/navbar')  
  <div class="container content-section">
      @!section('content')
  </div>
  
</body>
</html>
`

Use that explanation from Laravel-world:

Because Edge.js is very similar with Laravel Blade and also use some tags that preserved in Vue. So you should just tell Edge to not process some tags wth @{{row[col]}}

I wish you would have read docs. :confused: