Vue-从数组中拼接一个已定位的元素将把它的偏移量应用到下一个索引

Question

我对Vue很陌生，一直在做一个小项目，该项目在屏幕上使用了很多定位对象。我发现，从我的模型中切片一个索引会导致它的定位应用于下一个索引，重置它自己的索引。

下面的例子是相关的(展示了类似的意外行为(，但并不完全是我的问题——偏移量转移到下一个索引。

new Vue({
  el: '#app',
  data: {
    items: [0, 1, 2, 3]
  },
  methods: {
    take: function(i) {
      var item = $(i.target).closest('.sort').index();
      this.items.splice(item, 1);
    }
  }
});

button {
  position: relative;
  bottom: 0;
  margin-top: 25px;
}
.sort {
  padding: 15px;
  margin: 5px;
  display: inline-block;
  background: grey;
  position: relative;
}
.sort:nth-child(1) {
  top: 54px;
  left: 140px;
}
.sort:nth-child(2) {
  top: 155px;
  left: 230px;
}
.sort:nth-child(3) {
  top: 226px;
  left: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="app">
  <div class="sort" v-for="item in items">
    {{ item }}
    <span class="remove" v-on:click="take">x</span>
  </div>
</div>

预期的行为是项目保持原样，直到它们自己被删除。我目前的解决方案是复制下一个索引的样式并再次应用它们。任何帮助都将不胜感激，谢谢！

Answer 1

当您从items中splice出一个项时，它将从DOM绑定数组中删除。因为您使用的是nth-child(1)到nth-child(3)，所以的位置会发生偏移，因为删除的元素会向上偏移其余元素。

所以我有一些建议给你：

1. 假设每个元素的位置都是特定的，那么为什么不把它放在数据中，比如{item: 0, class: 'zero'}——标记中有一个变化：

   <div v-bind:class="['sort', item.class]" v-for="item in items">
        {{ item.item }} <span class="remove" v-on:click="take(item)">x</span>
   </div>
   

2. 与其像以前那样计算index，不如将item作为参数传递，因为如果应用排序/筛选，索引可能会有所不同。

3. 位置仍然不正确——最好将app保持为relative，并将absolute应用于所有sort类。

见下面的演示：

new Vue({
  el: '#app',
  data: {
    items: [{
      item: 0,
      class: 'zero'
    }, {
      item: 1,
      class: 'one'
    }, {
      item: 2,
      class: 'two'
    }, {
      item: 3,
      class: 'three'
    }]
  },
  methods: {
    take: function(item) {
      this.items.splice(this.items.indexOf(item), 1);
    }
  }
});

button {
  position: relative;
  bottom: 0;
  margin-top: 25px;
}
#app {
  position: relative;
}
.sort {
  padding: 15px;
  margin: 5px;
  display: inline-block;
  background: grey;
  position: absolute;
}
.remove {
  cursor: pointer;
}
.sort.zero {
  top: 54px;
  left: 140px;
}
.sort.one {
  top: 155px;
  left: 230px;
}
.sort.two {
  top: 226px;
  left: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="app">
  <div v-bind:class="['sort', item.class]" v-for="item in items">
    {{ item.item }} <span class="remove" v-on:click="take(item)">x</span>
  </div>
</div>