使用Vuejs实现实时评论
打赏作者

TomatoMr

这个系列是不是还没完?@JellyBool

heyunqinag 回复 TomatoMr

487478

JellyBool

恩,后面重录1.0版本的 @TomatoMr

heyunqinag 回复 JellyBool

6556456

JellyBool 回复 heyunqinag

这个是什么意思?你的评论怎么都是这些内容?

TomatoMr

楼主什么时候会推出1.0版本的?我想知道用户个人主页那块怎么做,@_@目前还是小白一只,每个模块都想看看大神是怎么做的(⊙_⊙)。

JellyBool

一个人并做不了那么快。。。 @TomatoMr

TomatoMr

楼主加油。。(ง •̀_•́)ง

JellyBool

额。。。慢慢来吧 @TomatoMr

TomatoMr

大神可以给个思路或者源码让我研究研究吗?(ಥ_ಥ)

JellyBool

额。。。到时候再说吧 @TomatoMr

TomatoMr

怎么同时像两张不同的表插入同样的数据呢?或者怎么向一张表填入另一张表的数据

JellyBool

@TomatoMr 如果没有关联关系,直接插入就可以啊

TomatoMr

我的意思是说一次提交,两张表都有同样的数据@JellyBool

wenqingzzz

jellybool写代码好自信,一段js从头写到尾,中间不调

wenqingzzz

最后提交评论的时候有一个get请求发生了错误/discussions/%7B%7B%20comment.avatar%20%7D%7D

chenxin 回复 wenqingzzz

你这个问题解决了吗??

hard88 回复 wenqingzzz

这个问题我遇到了,把vue-resource版本用0.8可行。

JellyBool 回复 hard88

嗯哼,vue-resource 后面的一些版本是不支持 callback 了,直接使用 .then() 这种形式了

北漂张小白 回复 JellyBool

.then() 这个函数post的话怎么传指呢?get的时候我吧参数拼接到url上了

this.$http.get(pageData.url+’?page=’+pageData.i).then(function(response){
removeLoading();}

问题已经解决了!!

JellyBool

那是我比较熟悉而已 @wenqingzzz 如果报错的话,直接开dev tools来调试就好

JellyBool

你看看你的 img的src是不是直接使用图片地址了 ? @wenqingzzz

ciotas 回复 JellyBool

我的也出现了同样的错误,img的src="@{ comment.avatar }"
另外我提交评论的,这段代码

this.$http.post('/comment',post,function () {
        this.comments.push(comment);
});

出现了Uncaught TypeError: Cannot read property ‘post’ of undefined的错误,请指导谢谢
  

JellyBool 回复 ciotas
Uncaught TypeError: Cannot read property 'post' of undefined

这是同样的错误么?应该是你没有正确引入 vue-resource 或者你的 post('/comment',post中后面的 post 有问题

ciotas 回复 JellyBool

是的 ,我把vue-resource.min.js引用放到vue.js之前了,好低级错误。
遇到另外一个问题,闭包function 里面this.comments.push(comment); 这句没执行,不刷新页面看不到评论,在function里面加console.log(comment) ,也没有打印来,请教。

JellyBool 回复 ciotas

额。。你的代码是什么样的?chrome 的 console 有什么报错么?

chenxin 回复 ciotas

你这个问题解决了吗

Shevy 回复 ciotas

vue-resource 后面的一些版本是不支持 callback 了,直接使用 .then() 这种形式了

JellyBool 回复 Shevy

对的,这是 promise 的

Alex

想问下,laravel5.3中貌似集成了vue.js,那csrf-token需要在meta和header中声明么?

JellyBool 回复 Alex

好像默认就有了

chenxin

提交评论后chorm中出现
GET http://localhost:81/Laravel/laravel-community/public/discussions/{{ url(comment.avatar) }} 404 (Not Found)
我的图片地址使用的是 src="@{ url(comment.avatar) }"

chenxin

为什么在" "下面就不识别@符号啊!

Kwong Yan Chan 回复 chenxin

你这个问题解决了?

chenxin 回复 Kwong Yan Chan

绑定的形式,在src前面加上:

Kwong Yan Chan 回复 chenxin

嗯 昨晚已经搞定了 ,谢谢哈 。

chenxin

现在的版本必须这样写才会在callback里面执行push函数:
this.$http.post(’{url("/comment")}’, post).then(function(){
this.comments.push(comment);
});

hard88

感谢这个系列,巩固了许多基础知识。

liudong0763

老师,我看到你数据库里有一个最后的泡妞攻略,可以发到我邮箱么?

Gavin1024

我发现vueJs是在页面全部加载进来之后进行判断逻辑处理的 所以我每次页面刷新时 都会有个评论一闪而过 而这个内容是一个**{comment.name}** {comment.body}之类的 所以说它就是先加载再处理vueJs里的逻辑了 可我以前写vuejs怎么没有这种情况

JellyBool 回复 Gavin1024

这个其实可以用 v-loak 来解决,或者你写成组件就好了

Augus

11个月结束了视频,11个月后还没有更新嘛

wl876645
@foreach($discussion->comments as $comment)
{$comment->user->avatar}
{$comment->user->name}
@endforeach

在blade模板中这样是很方便。但如果我在vue-cli,通过一个discussion_id能取到所有的comment。这样通过api能return所有的comment信息到vue-cli前端。但是每条comment->user的avatar.name等等信息该怎么取,有没有比较好的方案

JellyBool 回复 wl876645

直接使用 with :

Discussion::with('comment.user')->where()....

大概这个样子

Kwong Yan Chan

哎呀 各种报错。 我用了2.1vuejs 有问题么

Kwong Yan Chan

这个系列最后一个视频 卡在版本不正确,出现报错身上了估计是 。

Kwong Yan Chan

Jelly,你好像没有吧vue.min.js 放到github上面啊 。 。。。。

Kwong Yan Chan

这里头像没有获取到 出现,报错了

<a href="">
                                <img src="@{comment.avatar}" alt="64x64" style="width:64px;height:64px;" class="meida-object img-circle">
                            </a>
%7B%7B%20comment.avatar%20%7D%7D:1 GET http://localhost:8999/discussions/%7B%7B%20comment.avatar%20%7D%7D 404 (Not Found)
JellyBool 回复 Kwong Yan Chan

使用类似于 v-src 等形式:

v-bind:src = "@{comment.avatar}"

大概这样。你去看看文档

Kwong Yan Chan 回复 JellyBool

OK搞定了 vue第一次结束。 一个系列下来,感谢你Jelly兄!!至少以前看过5.2,不过忘记了 。 现在打算撸的是稳定版5.1,有你这些视频,帮助很大

好了最后一节这里我引入的版本,跟改过的代码:

  • vue.js:官网下的2.1版本
  • vue-resource:github里下的1.0.3版本
  • 头像处使用绑定:
<img v-bind:src="comment.avatar" alt="64x64" style="width:64px;height:64px;" class="meida-object img-circle">
  • js中回调函数方法改成:
this.$http.post( '/comment',post).then(function(){
      this.comments.push( comment );
} );
  • PS:那么show页面其他代码基本不变,实现了视频中的实时评论
    哈哈,看完这个。可以用 5.1来重构一下自己的blog了。刚好是想用markdown编辑器 。
北漂张小白

这一系列的课程看完了,跟着jelly老师完成了一个社区,学了不少东西,支持jelly。
这一系列的课程会接着更新吗?

JellyBool 回复 北漂张小白

你先看看学习路径吧…看看你需要补哪个方面的内容。看视频需要注意版本

BallOon

@{comment.avatar} @{comment.name} 在没有数据输入的时候,全部原样输出了@{comment.avatar} 类似这样的。、

JellyBool 回复 BallOon

额…这个应该是没有正确绑定到 vuejs 吧…不然 vuejs 处理之后是不会这样的吧

BallOon 回复 JellyBool

但是输入回复的时候却能正常输出。。。

JellyBool 回复 BallOon

额…这…

BallOon 回复 JellyBool

就是我在回复的时候,却能展示,但是不回复的时候 刷新 就出现{xxxxx}这样的原样输出、

JoouA

有木有视图的源码啊?

a359611223

laravist中是先将评论插入到评论顶部,然后刷新之后就按照时间排序到最下面了是吧

JellyBool 回复 a359611223

是的,我默认就是这样设计

q646448149

某些课节的时候你说你将代码放到了Github上,请问下你是整个项目放上去的,还是某段代码放上去的啊。我看了下你github,没有找到这个项目的代码啊

JellyBool 回复 q646448149

当时的很多都是在 gist 上的吧,这个视频需要的文件在这里貌似

https://github.com/JellyBool/laravel-app

王誌鵬

在最后面一条直接给原文输出了
显示的

{comment.name}
{comment.body} 
SyntaxError: missing } after property list
user_id:''64,

第二个错误是

"NetworkError: 404 Not Found - http://laravel.com/discussions/%7B%7Bcomment.avatar%7D%7D"

貌似都没有解析,我换了几个vue.js的版本和vue-vue-resource版本都是一样的效果
现在的版本
vue-resource v0.7.0
Vue.version1.0.21
请问这是哪里出了问题呢?

JellyBool 回复 王誌鵬

1.确定语法没写错么?

2.这个你可以使用 v-src 来显示头像