如何使用 Vue.js 将待办事项从一个列表移动到另一个列表？

Question

我正在尝试使用 Vue.js做这个 svelte 示例todo 移动动画。

您可以在下面找到我到目前为止所做的工作。只需点击待办事项即可查看。

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 500px;
  transition: all 0.2s;
}

.todos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.todo {
  border: 1px solid #ccc;
}

.todo.undone {
  grid-column: 2 /span 1;
}

.todo.done {
  grid-column: 1 /span 1;
  background: blue;
  color: white;
}

.flip-list-move {
  transition: all 1s ease-in-out;
}

.header-wrapper {
  display: grid;
  grid-auto-flow: column;
  
}

.header, .todo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">


  <div class="header-wrapper">
   <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  
    <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  </div>

  <transition-group name="flip-list" tag="div" class="todos">

    <div class="todo done" v-for="item of done" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>26</span>
      <span>Male</span>
    </div>

    <div class="todo undone" v-for="item of undone" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>20</span>
      <span>Male</span>
    </div> 

   
  </transition-group>
</div>

为了将待办事项从一个列表移动到另一个列表，我使用了 CSS 网格，但我找不到一种方法来区分待办事项（左和右）而没有空的网格单元。

如果有更好的方法来实现 svelte 文档中的示例或省略空单元格的方法，我将不胜感激。

尽管一开始看起来很容易，但它有点棘手。

Answer 1

您可以通过追踪目标的第一个元素index的v-for循环。索引0始终是第一个元素。并给它以下样式：

grid-row-start: 1;

编辑演示：

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 500px;
  transition: all 0.2s;
}

.todos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.todo {
  border: 1px solid #ccc;
}

.todo.undone {
  grid-column: 2 /span 1;
}

.todo.done {
  grid-column: 1 /span 1;
  background: blue;
  color: white;
}

.first-right {
    grid-row-start: 1;
}

.flip-list-move {
  transition: all 1s ease-in-out;
}

.header-wrapper {
  display: grid;
  grid-auto-flow: column;
  
}

.header, .todo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">


  <div class="header-wrapper">
   <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  
    <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  </div>

  <transition-group name="flip-list" tag="div" class="todos">

    <div class="todo done" v-for="item of done" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>26</span>
      <span>Male</span>
    </div>

    <div :class="['todo', 'undone', { 'first-right': index === 0 }]" v-for="(item, index) of undone" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>20</span>
      <span>Male</span>
    </div> 

   
  </transition-group>
</div>