lundi 23 avril 2018

Why I am getting blank screen while using v-for in my Laravel page with vue js

I am getting a blank screen while using v-for on my Laravel page with vue js When I am trying to loop through with this I am getting the blank screen I tried in totally new test project without Laravel then its working fine Thanks in advance I have attached my code below.

@extends('layouts.app')

@section('content')
    <div class="container" >
    <div class="row">
        <div class="col-md-8 col-md-offset-1">
            <div class="panel panel-default" id="_app">
                <div class="panel-heading">View Folder</div>

                    <button type="button">add item</button>
                      <button type="button">change first item</button>

                      <ul>
                        <li v-for="vl in list">[[vl.name]]</li>

                      </ul>




            </div>
        </div>
    </div>
</div>




@endsection

and the vue js code is:

Vue.options.delimiters = ['[[', ']]'];
var app = new Vue({
  el: '#_app',
    data: {
    list: [
      {name: 'first', label: 1},
      {name: 'second', label: 2},
      {name: 'third', label: 3}
    ],
    idx: 4


  },
  methods: {
    // addItem: function() {
   //    this.list.push({name: 'new item', label: this.idx++})
   //  },
   //  removeItem: function(item) {
   //   this.list.$remove(item)
   //  },
   //  changeFirst: function() {
   //   this.list[0] && (this.list[0].name = this.list[0].name.toUpperCase())
   //  }
  }
})



from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2qROfA6
via IFTTT

Aucun commentaire:

Enregistrer un commentaire