Display in v-for laravel-vue

Question

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>

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

yes. its set to $masterIds = OBMaster::all(); return $masterIds; — chimichi004
– chimichi004, Commented Aug 14, 2018 at 13:54
@ChinLeung bdw. i change it the axios route to /viewrequestsample and also the controller. — chimichi004
– chimichi004, Commented Aug 14, 2018 at 13:57
@gil Uncaught TypeError: url.indexOf is not a function and CSRF token not found: — chimichi004
– chimichi004, Commented 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
– gil, Commented Aug 14, 2018 at 14:43

moreirapontocom · Accepted Answer · 2018-08-14 14:17:37Z

0

Your data must be a function that returns your data.

Like this:

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

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

answered Aug 14, 2018 at 14:17

moreirapontocom

4583 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

chimichi004 Over a year ago

to be honest not. I don't know if i did correctly. i just follow a tutorial and do a little experiment.

chimichi004 Over a year ago

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>

chimichi004 Over a year ago

yes. that correct. i fillow whats in the table from my database

chimichi004 Over a year ago

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.

chimichi004 Over a year ago

.sir. ur sample works properly. but mine isn't. Is there something a problem with my routes or controller?.

|

Collectives™ on Stack Overflow

Display in v-for laravel-vue

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related