Question

public / js / symp.js（首发）

new Vue({
  el :'#symp',
  data :{
    tease: 'test',
    items: [
      { message: 'Foo', subject: 'A' },
      { message: 'Bar', subject: 'B' }
    ]
  }
});

resources / views / dash.blade.php（初始帖子）

<html>
<body>
@extends('layouts.app')  [ this includes symp.js and calls @yeild('content') ]

@section('content')
<div id="symp">
  <div>
  <span>subject</span>
  <span>message</span>
  </div>
  tease: <span>@{{ tease }}</span>
  <div v-for="item in items">
  sub: <span>@{{ item.subject }}</span>
  msg: <span>@{{ item.message }}</span>
  </div>
</div>
@endsection

我知道Laravel与{{}}打架，因此需要预先设置@，但我的理解是上面的演示代码段应该提示：测试然后两行
sub：A msg：Foo
sub：B msg：Bar
...唉，我看到了挑逗：主题信息，没有戏弄价值，根本没有行。

什么是搞笑，我有一个文件夹作为我正在构建的项目的一部分，其中有http://www.hc-kr.com/2016/11/laravel-5-vuejs-crud-with-notification-pagination-laravel.html的工作版本，但是该文件夹强制Vue.js 1.x，所以这似乎是唯一的问题与Laravel 5.3的vue.js 2.x？

[根据@PanJunjie潘俊杰建议更新:-)]

资源/视图/ dash.blade.php

@extends('layouts.app')

@section('content')
<div id="symp">
</div>
@endsection

资源/视图/布局/ app.blade.php

<html>
<script src="/js/app.js"></script>
<body>

...

<template id="symp-temp">
tease: <span>@{{ tease }}</span>
<div v-for="item in items">
  sub: <span>@{{ item.subject }}</span>
  msg: <span>@{{ item.message }}</span>
</div>
</template>

</body>

<script src="/js/symp.js"></script>
</html>

公共/ JS / symp.js

new Vue({
  el :'#symp',
  name: 'symp',  /*  unnecessary?  */
  template: '#symp-temp',  /* this helps a bit :-)  */
  data :{
    tease: 'well',
    items: [
      { message: 'Foo', subject: 'A' },
      { message: 'Bar', subject: 'B' }
    ]
  }
});

取得一些进展。现在显示挑逗值，但项目行仍然不显示。 JavaScript控制台报告此...

[Vue warn]: Component template should contain exactly one root element:

tease: <span>{{ tease }}</span>
<div v-for="item in items">
  sub: <span>{{ item.subject }}</span>
  msg: <span>{{ item.message }}</span>
</div>

Answer 1

由el表示的挂载点将包含由vue的呈现html覆盖的内容，您不应该将模板放入其中。如何纠正它（第一个可能是最好的，因为您可能希望将模板保留在刀片文件中）：

将您的模板移出<div id="symp">并告诉vue将其用作模板：<template id="symp-temp">...<template>并向template: '#symp-temp'添加new Vue option }。（自定义标记在html5标准中有效）
将模板移至.js个文件并将其包装在ES6的`中，以便在引号中换行。将反引号字符串放在template选项中。
使用.vue single file components。

Answer 2

这在Vue 1.x中运行良好但在第2版中你需要将模板包裹在div标签上：

资源/视图/布局/ app.blade.php

<template id="symp-temp">
    <div>
        tease: <span>@{{ tease }}</span>
        <div v-for="item in items">
            sub: <span>@{{ item.subject }}</span>
            msg: <span>@{{ item.message }}</span>
        </div>
    </div>
</template>

您可以在github https://github.com/vuejs/vue-loader/issues/384

上查看问题

Answer 3

Egad，这是一种钝的野鹅追逐。

1）小心地在元素周围放置额外的div以隔离它们。通知戏弄现在有专门的div围绕它，项目... v-for有一个不同的专用div围绕它。如果不这样，Vue 2+会感到困惑并且不会打球。

<template id="symp-temp">
<div>
<div>tease: <span>@{{ tease }}</span></div>
<div v-for="item in items">
  sub: <span>@{{ item.subject }}</span>
  msg: <span>@{{ item.message }}</span>
</div>
</div>
</template>

2）由于某种原因，这个。$ set（...）我想是不赞成的（或者需要额外的范围，我不知道）。使用带有完整参数的Vue.set似乎在Vue 2+世界中起作用。

Vue.set(this, 'items', response.data.data.data);

我可能会找到更多的小鬼，但看起来我现在已经解开了： - ）

有关更多上下文，请参阅我尝试启用的更多代码。我正在进行相当多的自定义布局实验，因此在我们的数据架构停止运行之前要避开组件。

new Vue({
  el :'#symp',
  name: 'symp',
  template: '#symp-temp',
  data :{
    tease: 'well',
    items: [
      { message: 'Foo', subject: 'A' },
      { message: 'Bar2', subject: 'B' }
    ],
    pagination: {
      total: 0,
      per_page: 2,
      from: 1,
      to: 0,
      current_page: 1
    }
  },
  mounted: function() {
    this.getVueItems(this.pagination.current_page);
  },
  methods: { 
    getVueItems: function(page) {
      /*  URL /make is a Laravel resource that pulls rows from a database,
      /*  returns them in json list, which the Vue.set transfers to the template :-)  */
      this.$http.get('/make?page='+page).then((response) => {
        Vue.set(this, 'items', response.data.data.data);
      });
    } 
  }
});

Laravel 5.3，Vue.js 2+无法获得列表渲染（v-for）工作

3 个答案: