简介

首先这是一个Laravel练手项目，使用blade和Vue组件混合开发Web页面。
本文章将使用Vue.js组件为博客详情页添加评论功能，主要实现以下功能：

文章页面可查看评论
用户可进行评论，并且不需要刷新视图

准备工作

首先新建好Vue组件：Comment.vue 并将它在入口（默认为app.js）进行注册：

Vue.component('comments',require('./components/blog/Comments.vue').default)

上一篇文章讲到了评论多态关联，所以这里的评论组件化，可用于博客页面和新闻页面。所以在vue页面中添加prop参数：type，并在blog的show页面引入，<comments type="blog"></comments>

 props:["type"],mounted(){console.log(this.type);}

在console中调试成功，输出’blog’
同时还需要一个id参数，方法如上……

开搞

样式……

样式这个东西，得讲究缘分，有时候你要它好看，它就丑，有时候……好吧它一直很丑，就是下面这样

API请求

这里使用的是axios，在Vue中调用十分方便，先在入口申明:

import axios from 'axios'
Vue.prototype.$ajax = axios;

获取评论

采用评论接口xxx/api/blog/{id}/comment

 getComments: function() {this.$axios.get("/api/blog/" + this.id + "/comment").then(res => {console.log(res.data);});}

测试通过~

接下来就是绑定数据了

 <ul><li v-for="item in comments"><div class="content"><div class="head"><img src="/image/head.jpg"></div><div class="body">{{item.body}}</div></div><div class="action"><a href v-show="false"><span><i class="iconfont icon-trash"></i> 删除</span></a></div></li></ul>

正常~~~

同时评论计数也需要绑定一下，这个在blog对象中存在，直接传递就可以了

创建评论

接口为xxx/api/blog/{{id}}/comment?api_token=xxxxxxxxx

 sendComment:function(){var api_url = "/api/blog/" + this.id + "/comment";var api = window.tokenize ? window.tokenize(api_url) : api_url;this.$axios.post(api,{"body" : this.comment}).then(res => {this.comment = "";this.comments.unshift(res.data.data);});}

成功

以上就是实现内容，才疏学浅，望见谅……

使用Vue组件为页面添加评论相关推荐

vue如何整个页面添加loading
整个页面添加loading const loading = this.$loading({lock: true,fullscreen: true,text: '启动中',background:'rgb ...
Vue给单独页面添加背景色
由于外层还有一个div,所以设置背景色100%的时候不能全部都被背景色覆盖. 如果给HTML设置背景色还会影响到其他页面的背景色. 解决办法: 给style添加一个scoped表示当前样式只给当前页面 ...
vue给单独页面添加背景颜色
vue 单独设置背景颜色的方法是在template下的子div上添加样式 <template><div class="htmlBox"><div> ...
vue动态在页面添加背景图片
<div class="home-logo" :style="{backgroundImage:'url('+config.data.logo+')'}" ...
vue 给页面添加enter回车事件 - 代码篇
vue 如何给页面添加enter回车事件? 主要代码: @keyup.enter.native="ajaxLoginApi()" 代码示例: <el-form ref=&qu ...
【Vue实例四】利用Vue组件实现添加评论的功能
前面学到了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下: <!DOCTYPE html> <html lang="en"> ...
vue组件案例----发表评论功能
页面展示 1.引入样式bootstrap.css和vue.js文件 <link rel="stylesheet" href="../bootsrtrap/css/b ...
vue 动态给每个页面添加title、关键词和描述
前言:直接写html加title和关键词想必大家都知道怎么去加,但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓ 先在router.js里面配置我们的title.关键词和描述 {path: ...
html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...

使用Vue组件为页面添加评论

简介