在Rails中创建一个posts的index列表，常用的就是在index.html.erb文件中写html，并在posts_controller#index方法中respond_to html，现在尝试学习vue（因为据说是在很快），需要对前端进行改写。下面进行对比。
普通Html Js的实现方式
直接上代码
index.html.erb
<table>
<thead>
<tr>
<th>主题</th>
<th>创建人</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<% @posts.each do |post| %>
<tr>
<td><%= link_to post.topic, post %></td>
<td><%= post.contact_person %></td>
<td><%= post.created_at %></td>
</tr>
<% end %>
</tbody>
</table>
这种方式前端需要整个渲染，获取@posts的全部信息，但其实，我们只需要得到我们想要的信息。那么做个api借口，把想要的信息通过json的方式传过来就可以了。这就是vue的好处。
vue.js的实现方式
首先在posts_controller#index中添加对json的响应。
posts_controller.rb
def index
@posts = Post.all
respond_to do |format|
format.html
format.json
end
end
format.json会自动寻找index.json文件，我们可以用jbuilder写，创建index.json.jbuilder
index.json.jbuilder
json.array! @posts do |post|
json.extract! post, :topic, :contact_person, :created_at
end
这样就会返回如下结构的json
[{topic: xxx, contact_person: xxx, created_at: xxx},
{...},
{...}]
再后，我们用vue搭建table，并通过$getJSON获取上面的json
index.html.erb
<div id="posts-table">
<template>
<el-table :data="tableData">
<el-table-column prop="topic" label="主题" width="180"></el-table-column>
<el-table-column prop="contact_person" label="创建人" width="180"></el-table-column>
<el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
</el-table>
</template>
</div>
<script>
var vm = new Vue({
el: '#posts-table',
data: {
tableData: []
},
created: function() {
this.getJson();
},
methods: {
getJson() {
var that = this
$.getJSON('<%= posts_path %>', function(data) {
that.tableData = data;
});
}
}
})
</script>
需要注意的几点：
- 每次使用vue都要创建new Vue
- created: function() 调用方法
- getJSON()里this的作用域变了，需要在外面重新定义
