用Rails.5.2+ Vue.js做 vue-todolist app

Rails5.2+Vue.js完成Lists(curd)


注意: Edit/update使用SPA(不换页)的方法完成。点击文字出现一个输入框和按钮。

我的git: https://github.com/chentianwei411/vue-lists

 

app/javascript/pack/application.js

用Rails.5.2+ Vue.js做 vue-todolist app

 

lists.vue 

用Rails.5.2+ Vue.js做 vue-todolist app

添加了方法

  • 在new Vue创建实例的时候添加了hook created方法,钩子方法调用了fetchLists方法用于得到数据:
    • fetchLists方法,其实对应(Controller#get)
  • addLine     (Controller#create)
  • changeLine方法, 用于配合v-show的显示/隐藏功能
  • deleteLine:  (Controller#destroy)
  • updateLine  (Congroller#update)

 用Rails.5.2+ Vue.js做 vue-todolist app

 

addLine: function() {
 this.$http.post(‘/lists.json‘, { item: this.checkInput }, {}).then(response => {
  this.fetchLists(), this.checkInput = ‘‘
 }).catch(function(error) {
  console.log(‘Got a problem‘ + error)
 })
}

catch用于全程出错后,对错误的处理。

 

deleteLine(id) {
 this.$http.delete(`/lists/${id}.json`).then(response => {
 this.fetchLists()
})

 

 


 

disabled属性

当true时,元素不能用。包括<button><input><select><textarea><options>

<input type=‘text‘ v-model=‘line‘ class=‘form-control‘ autofocus="true">
<button v-on:click=‘addLine()‘ class=‘btn btn-primary‘ :disabled="!line.length" >Add line</button>

line是string。调用!line.length方法, 结果有2种:

  • !0    >  true     line是空字符串。
  • !12  > false  line不为空。

 

JS的Array的map方法

例子:

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

persons.map((old) => { old.secondname = ‘hello‘; return old})

结果

[

{firstname: "Malcom", lastname: "Reynolds", secondname: "hello"},

{firstname: "Kaylee", lastname: "Frye", secondname: "hello"},

{firstname: "Jayne", lastname: "Cobb", secondname: "hello"}

]

arr.map(function(old) { return new })


 

用Rails.5.2+ Vue.js做 vue-todolist app

上一篇:vue跳转页面在个别手机返回首页index问题


下一篇:applicationContext.xml和dispatcher-servlet.xml的区别