Laravel 实战开发知乎: Vuejs 实现评论组件
打赏作者

Laravel 实战开发知乎: Vuejs 实现评论组件

Laravel Vuejs 实战:开发知乎 >> Laravel 实战开发知乎: Vuejs 实现评论组件 视频发布于 2017-01-24

在新版的知乎中,评论也是做成了一个 Modal dialog 的形式,所以我们也是可以使用 Vuejs 的组件来实现这个功能,期间会学到超多知识:组件,动态 modal,全局变量小技巧
fnz1988

store方法this.comments.push这样要push一个新对象,不然连续发两条都指向同一内容

saloou

当第一次提交评论后 能 正常添加到列表里并显示出来,但是当我再次输入内容 提交评论时,就将刚刚提交的内容替换了,但是数据库comments表里 正常插入了记录!请问老师怎么解决这个问题啊?

JellyBool 回复 saloou

你看看上面的评论,你在 vuejs push 一个新的 Commet 就好了

saloou 回复 JellyBool

感谢回复,本人新手,多多包含啊 呵呵

saloou 回复 JellyBool

老师 帮帮忙啊 我研究一天了还是没弄明白啊!这里到底应该怎样 写啊
this.newComment.body=response.data.body
this.comments.push(this.newComment)
this.body = ''
this.count++

JellyBool 回复 saloou

这样试试?

 this.newComment.body = response.data.body
                    this.comments.push(this.newComment)
                    this.body = ''
                    this.newComment.body = ''
                    this.count ++
saloou 回复 JellyBool

这样试了,不行啊!

JellyBool 回复 saloou

我测试了一下,这样:

 store() {
                this.$http.post('/api/comment',{'type':this.type,'model':this.model,'body':this.body}).then(response => {
                    let comment = {
                        user : {
                            name:Zhihu.name,
                            avatar:Zhihu.avatar
                        },
                        body: response.data.body
                    }
                    this.comments.push(comment)
                    this.body = ''
                    this.total ++
                })
            },

然后 data 的 newComment 可以不用了:

 data() {
            return {
                body:'',
                comments: []
            }
        },
laravelcasts 回复 JellyBool

这里为什么加了let 修饰后再push的数组中就不会覆盖,看了手册不是很明白啊

JellyBool 回复 laravelcasts

哪个?具体的代码是什么?

GOD_Nt 回复 JellyBool

视频看不了了

JellyBool 回复 GOD_Nt

我看看具体什么原因

weir2009

本想把这个系列的laravel部分先走通再去填Vuejs的坑,学到这里,感觉不先把Vuejs怼下来是不行了~ ┑( ̄Д  ̄)┍

JellyBool 回复 weir2009

你先看看基础的 vuejs 2.0 的教程先,不然会有很多坑或者你不理解的地方

weir2009 回复 JellyBool

好的~~~~~~~~~~~

Psychic_role

老师,按视频中写法,显示头像地址是
而我实际的头像文件地址是…/images/avatars/default.png,这个vuejs的v-bind怎么改才能加上…/?

 <div class="modal-body">
                        <div v-if="comments.length >0">
                            <div class="media" v-for="comment in comments">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" :src="comment.user.avatar">
                                    </a>
                                </div>
JellyBool 回复 Psychic_role

用这个 /images/avatars/default.png 绝对路径

Psychic_role 回复 JellyBool

嗯,我想以后自定义了头像还是会用到相对路径吧,那该怎么解决这个问题?
完全不熟悉vuejs

JellyBool 回复 Psychic_role

如果你要在 spa 中使用 img ,那就用 file-loader 处理就好了。

不熟悉 vuejs 的话,先看看 vuejs 的教程吧

Psychic_role 回复 JellyBool

为什么老师用的5.3版本就不存在这个问题呢

JellyBool 回复 Psychic_role

你用的 是 5.4 么? 5.4 貌似是用 mix 了吧

Psychic_role 回复 JellyBool

mix会影响到这里吗?

JellyBool 回复 Psychic_role

这个应该不会的吧。不过看你对 webpack 的了解

Psychic_role 回复 JellyBool

改成这样就没错了

JellyBool 回复 Psychic_role

你把数据库的路径改一下就好了啊

myos

###讲的不错

yujiak

视频后半部分播放不了???!

JellyBool 回复 yujiak

我看看,有可能是文件问题。。。。

yujiak 回复 JellyBool

点赞那个视频也有类似的问题

JellyBool 回复 yujiak

好的,估计是我上传视频的问题。

我这里正常重新修复这个视频,两分钟后应该OK了

萧十五郎

发布评论后 提示这个错误 时什么问题?
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “count”

found in

—> at /Users/shiwuhao/Documents/code/myCode/zhihu/resources/assets/js/components/Comments.vue

萧十五郎

发布评论后 提示这个错误 时什么问题?
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “count”

found in

—> at /Users/shiwuhao/Documents/code/myCode/zhihu/resources/assets/js/components/Comments.vue

萧十五郎

我粘贴的内容 为什么会丢掉一部分
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “count”

萧十五郎

评论后 提示这个错误
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “count”

JellyBool 回复 萧十五郎

你把 count 传个 data 的一个值,再修改data的值就应该不会有这个问题了

萧十五郎 回复 JellyBool

按你的方法修改后 已解决 膜拜大神

biggerdong 回复 JellyBool

对vue不太了解,请问这一步具体怎么修改啊,折腾好久了

JellyBool 回复 biggerdong

比如说 props:[‘count’],你把这个 count 先传给 data :

data(){
  return {
    total:this.count
  }
}

再去操作 total 就好

biggerdong 回复 JellyBool

nice,可以了,准备把这学完再看看vue,现在有了vue2.0,vue1.0还有必要再看么?

JellyBool 回复 biggerdong

没必要,直接学 vuejs 2.0

xiaofengzhi

老大,我这里有个不理解的地方,就是定义好多态关系之后直接用$question->comments()->count()就可以知道对问题的评论个数,不明白能讲的详细一点吗,实现的原理?

liujun 回复 xiaofengzhi

我也想知道啊啊啊

carsonlius 回复 xiaofengzhi

$question->comments() 可以获取特定question下面comment的sql query
另外question里面有个字段, comments_count,也是可以直接用的(前提你要维护)

JoouA

answer=Answer::with(comments,comments.user)>where(id,answer = Answer::with('comments','comments.user')->where('id',id)->first();
with()中的comments.user代表什么,在comments表中没有user这个字段啊 不解啊

JellyBool 回复 JoouA

就是加载 comment 下 user 这个关联,不是字段。其实就是 user() 这个方法

JoouA 回复 JellyBool

嗯嗯 谢谢老师 老师太牛了 这么久了还记得这个知识点

JoouA

嵌套的渴求式加载

要渴求式加载嵌套的关联关系,可以使用”.“语法。例如,我们在一个 Eloquent 语句中渴求式加载所有书的作者及所有作者的个人联系方式:

$books = App\Book::with(‘author.contacts’)->get();

yff

最后数目从原先的取字段还是变回了即使计算的方式

JellyBool 回复 yff

这是什么意思?

yff 回复 JellyBool

questions和answer都是有comments_count字段,没有像先前的的代码一样取数目字段,现在是直接count

UncleCaozy

我发现对问题进行评论的时候,并没有为问题表的comments_count进行存入数据操作

UncleCaozy

可以在show视图中,这样输出question的comments_count

 <comments type="question"
                                  model="{$question->id}"
                                  count="{$question->comments()->count()}">
                        </comments>
JellyBool 回复 UncleCaozy

嗯,对的。你可以在评论的时候也更新 comments_count

iopkq999

一直听jelly讲“e ge lou”,这是什么东西 - - 好尴尬

JellyBool 回复 iopkq999

eager load – 懒加载吧

lvxianchao

还想问一个比较low比的问题。。。

我在控制器里用 request() 助手函数,敲 re ,然后补全,PHPStorm 给我补全出来的是 \request() ,想问下前面这个 \ 怎么能弄掉,强迫症,每次补全还要去特意删除掉,好难受。。。

JellyBool 回复 lvxianchao

这个问题我也找了好久没找到解决办法。。。

lvxianchao

针对刚刚那个 low 比问题:

我发现原来是自动生成的控制器,会用 use Illuminate\Http\Request 导致的,用了 use Request 就好了,但我看视频里好像并没有特意修改这个引用,怎么回事嘛,闹心啊。。。

JellyBool 回复 lvxianchao

默认 use Illuminate\Http\Request 这个的话,方法注入是这样的:

public function store(Request $request)
Flourishing
这里对应的每个答案下面的评论要是新增评论了 answer表的comments_count 字段就要执行加一操作 如果有删除评论的话就要执行减一操作 这里没有做删除评论功能 
对于question表的 comments_count 字段也是一样
在 store方法中 加入以下代码  得意于前面的 repository模式 这里代码做到了很好的共用
$model = $this->getModelNameFromType(request('type'));

        if($model === 'App\Question')
        {
            $question  = $this->questionRepository->byId(request('model'));
            $question->increment('comments_count');
            $question->save();
        }else{
            $answer = $this->AnswerRepository->byId(request('model'));
            $answer->increment('comments_count');
            $answer->save();
        }