Question

我在使用vue js的Laravel页面上使用v-for时出现空白屏幕当我试图通过这个循环时，我得到了空白的屏幕，我在没有Laravel的全新测试项目中尝试然后它工作正常在此先感谢我已经附上了我的代码。

@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

和vue js代码是：

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())
   //  }
  }
})

Answer 1

您提供的数据无法回答，无论如何我认为您使用的是标准的Laravel + vue.js样板（版本？），并应检查以下内容：

是＆＃34; npm（或纱线）安装＆＃34;在没有警告/错误的情况下运行？
是＆＃34; npm run dev＆＃34;报告任何错误？

我注意到你的源代码中有很多新行和错误的对齐方式，如果你使用lint请务必遵守它的规则（通常你不能有多行白线，你必须用一个白线结束你的代码换行，...）

为什么我在使用vue js的Laravel页面中使用v-for时会出现空白屏幕

1 个答案: