Laravel 5.3，Vue.js 2+不能得到列表呈递（V-的）工作

公共/ JS/symp.js（初始后）Laravel 5.3，Vue.js 2+不能得到列表呈递（V-的）工作

资源/视图/ 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与{{}}等需要预先@打架，但我的理解是上面的演示代码段应出示挑逗：先测试后两排
子：一个信息： 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>

来源

2016-11-27 rickatech

埃格德，这是一个愚蠢的野鹅追逐。

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）出于某种原因这一点。$集（...）我猜想已被弃用（或需要额外的范围，我是不知道的）。尽管在Vue 2+世界中使用带完整参数的Vue.set似乎可行。

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); 
     }); 
    } 
    } 
});

来源

2016-11-28 09:12:12 rickatech

通过el表示将有什么里面的VUE呈现的HTML覆盖挂载点，你不应该把你的模板里面。方法来纠正（第一个可能是最好的，因为你可能要保持你的模板在刀片的文件）：

移动模板出来的<div id="symp">告诉VUE使用它作为模板，如：<template id="symp-temp">...<template>并添加一个template: '#symp-temp'option到您的new Vue。（自定义标记是HTML5标准有效）
移动模板.js文件和ES6的` S的允许换行引号包装他们。将反引号字符串放在template选项中。
使用.vuesingle file components。

来源

2016-11-28 03:21:41

我使用单一的.vue（＃3）更成功，但它并不理想。真的很困惑，为什么这段代码与最新的vue.js差得很厉害 – rickatech

实际上也排序了＃1（看下面）:-) 谢谢！ – rickatech

这Vue公司1.x中工作得很好，但在VUE 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

来源

2016-12-31 20:31:05

Laravel 5.3，Vue.js 2+不能得到列表呈递（V-的）工作

回答

相关问题