0

EDITED:

I'm using Vue.js and I'm having an issue that my object JSON-string doesn't show.

The problem is the object string doesn't display in v-for.

JS

var app = new Vue({
    el: '#ob-rapper',

    data:{
        items:[],
    },
    mounted: function mounted(){
        this.getVueItems();
    },
    methods:{
        getVueItems: function getVueItems() {
          var _this = this;
          axios.get('/viewrequestsample').then(function (response) {
            _this.items = response.data;
          });
        }
    }
});

Controller:

public function viewRequestSample(){
    $data = OBMaster::all();
    return $data;
}

route:

Route::get ( '/requestsample', function () {
    return view ( 'Approvers.RequestSample' );
} );
Route::get('/viewrequestsample', 'AdminPagesController@viewRequestSample');

HTML:

<div class="card">
  <div id="ob-rapper">
    <div class="card-body">
      <table class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
        <thead>
          <tr role="row">
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date registered: activate to sort column ascending" >
              Name of Employee
            </th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Role: activate to sort column ascending" >
              Date Filed
            </th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending">
              Status
            </th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending">
              Actions
            </th>
          </tr>
        </thead>
        {{ csrf_field() }}
        <p class="text-center alert alert-success">Deleted Successfully!</p>

        <tbody role="alert" aria-live="polite" aria-relevant="all">
           <tr v-for="item in items">
              <td>@{{ item.id }}</td>
              <td>@{{ item.emp_id }}</td>
              <td>@{{ item.date_filed }}</td>
              <td>@{{ item.obdate}}</td>
              <td>@{{ item.obfrom}}</td>
              <td>@{{ item.obto}}</td>
              <td>@{{ item.created_a}}</td>
              <td>@{{ item.updated_at}}</td>
              <td id="show-modal" class="btn btn-info" ><span
                        class="glyphicon glyphicon-pencil"></span></td>
              <td id="show-modal" class="btn btn-danger"><span
                            class="glyphicon glyphicon-trash"></span></td>
           </tr>            
        </tbody>
    </table>
   </div>
  </div>
</div>

..............................................................................................................................................................

10
  • Are you using the datatable plugin?
    – Chin Leung
    Aug 14, 2018 at 13:39
  • yes. its set to $masterIds = OBMaster::all(); return $masterIds; Aug 14, 2018 at 13:54
  • @ChinLeung bdw. i change it the axios route to /viewrequestsample and also the controller. Aug 14, 2018 at 13:57
  • @gil Uncaught TypeError: url.indexOf is not a function and CSRF token not found: Aug 14, 2018 at 14:40
  • Are items in your Vue Dev Tools undefined? You could omit the other 2nd mounted word in mounted: function mounted() just mounted: function() is fine.
    – gil
    Aug 14, 2018 at 14:43

1 Answer 1

0

Your data must be a function that returns your data.

Like this:

data() {
    return {
        items:[]
    }
}

Question: Is your interpolation tag defined to @{{}} correctly?

7
  • to be honest not. I don't know if i did correctly. i just follow a tutorial and do a little experiment. Aug 14, 2018 at 14:19
  • its the same in the tutorial. <tr v-for="item in items"> <td>@{{ item.id }}</td> <td>@{{ item.name }}</td> <td>@{{ item.age }}</td> <td>@{{ item.profession }}</td> Aug 14, 2018 at 14:20
  • yes. that correct. i fillow whats in the table from my database Aug 14, 2018 at 14:20
  • Still nothing sir. if i open that localhost:8000/viewrequestsample/ .it does view the object string. but when in the localhost:8000/viewrequestsample/ it doesn't put any in the v-for. Aug 14, 2018 at 14:28
  • .sir. ur sample works properly. but mine isn't. Is there something a problem with my routes or controller?. Aug 14, 2018 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.