(GoRails )使用Vue.js制作拖拉list功能(v5-8)

视频5

改进视觉效果，让list看起来更舒服。新增横向滚动功能。

参考我的trello：https://trello.com/b/BYvCBpyZ/%E6%AF%8F%E6%97%A5%E8%AE%B0%E5%BD%95

board的CSS设计参考，内部list的设计参考。

不是很精通css：直接抄袭。

.board {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.list {
  background-color: #dfe3e6;
  border-radius: 3px;
  display:inline-block;
  vertical-align: top;
  width: 270px;
  padding: 10px;
  margin-right: 10px;
  height: 100%;
}

一个问题：✅。

新建的list,因为是空的，所以不能拖拉。

在list-card类上加一个min-height: 5px;

拖拉的时候需要把card拖动到空list最上方才行。不能是任意位置。

这是这个插件的局限，官方示例也是这样。

导致排列有些问题，可以用HTML5原生拖拽代替sortable。

网上一篇相关文章https://segmentfault.com/a/1190000010078042 讲到了这个矛盾

---

一个错误，箭头函数带{}的话，不要省略return：

const index = this.lists.findIndex((list) => {list.id == list_id})  
这是❌的不能省略return

正确的写法：
const index = this.lists.findIndex((list) => {
    return list.id == list_id
})
或者
const index = this.lists.findIndex( list => list.id == list_id)

---

视频6

最重要的一章：重构--子组件subcomponents.

This is basically what you're doing with Vuex, but we're going to be building it from scratch so you can see how all of that works and why you want to sort this stuff like so.

a global data store 。

---

window object代表了在一个浏览器内打开的窗口。

所有的全局JavaScript对象，函数，变量自动的成为这个window object的members.

1.全局变量是properties特性
2.全局函数是methods
3.甚至document对象是一个window对象的特性，
　　平时写的document.getElementById('xxx'),其实省略了前面的window

既然是全局对象，所以可以添加key/value对儿。

比如： window.store = {} ,这是全局变量，用于全局数据存储。

目的：是拆分出子组件

第一步：改变数据接收方式：用全局变量，替代data选项中的lists

1. 用window.store = {} 存储从DOM中"#boards"根元素的的data-lists数据。

window.store.lists = JSON.parse(element.dataset.lists)

初始化vue中的data选项，被改为全局对象window中的变量store。

data: window.store就是：data: {lists: Array(4)}

也可以这么写data: {lists: window.store.lists} 基本是一样的。

因为初始化的data都是响应方式的，Vue.js可以监听它的变化。

所以在控制台：widow.store.lists.push({name: '再加一列'}),会直接渲染页面增加这列。

利用控制台，可以debugger,或者其他都是响应方式的，非常方便。

之后我们的子组件，也可以响应window.store中的数据，因为它是全局对象。

2. 新建list.vue单文件组件，作为一个子组件使用。

mkdiar app/javascript/component

touch app/javascript/component/list.vue

然后把app.vue的代码粘贴过去。

1. 首先：粘贴<template>,
2. 然后对<script>进行修改。
3. 最后把<style>从父组件移动到子组件（建议）

1.移动template:

app.vue中，需要在<script>内 import list from 'component/list', 然后在 export default {  components: { ..., list }, ...}

2.<script>修改：

3.method:  方法内的数据来源需要变更。

• 重构前，在app.vue中，可以直接使用data选项中的lists
• 拆分子组件后， 使用全局变量window.store.lists获得相应的数据。

4. 增加一个功能：显示／隐藏 输入框

1. 点击add a card 链接，
2. 显示输入框和add card按钮以及cancel按钮，
3. 同时自动聚焦到输入框。

<template>

　　 <a v-if="!editable" @click="inputMessage">add a card</a>

    <div v-if="editable">
      <input type="text" class="form-control mb-1" v-model='message' ref='input'>
      <button  @click="submitMessage" class="btn btn-secondary btn-sm">add card</button>
      <span @click="editable = false">cancel</span>
    </div>

<script>

    data: function() {
      return {
        message:"",
        editable: false
      }
    },
    methods: {
      inputMessage: function() {
        this.editable = true,
        this.$nextTick(function() {
          this.$refs.input.focus()
        })
      },

特性ref, 可以为子组件实例／元素生成一个id引用。这个id引用储存在父组件的$refs上。

实例方法／生命周期：vm.$nextTick([callback])  

参数是：function回调函数

将回调函数延迟到下次DOM更新♻️之后执行。

在修改数据之后立刻使用它，然后等待DOM更新。DOM更新后，执行回调函数。

和全局方法Vue.nextTick用法一样

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

区别： 实例方法的回调的this自动绑定到使用它的实例上。

关键字“this"一般指向当前代码运行时的对象（the current object the code is being written inside）.

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

---

一个错误❌

组件中的data选项，必须使用函数。⚠️需要加上return {xxx}

data functions should return an object

---

视频7

1. 增加card组件，新增modal弹窗。
2. 更新cards(save changes)。
3. 创建新的lists. add a list
4. 最后是❌的备注， 忘记了this，箭头函数作用域问题。
5. 知识点： classList.contain()方法。

点击一个card, 打开这个模式窗口来更新card内容。可以打开和关闭这个窗口。

1. 改list.vue的模版

    <draggable v-model='list.cards' :options="{group: 'cards'}" class="list-card" @change="cardMoved">
       //改成 使用card 组件。无需使用index了， 增加prop card,数据绑定为遍历循环的card
　　　　<card v-for="card in list.cards" v-bind:card='card'></card>
      //删除：