Vue中移动对象数组元素时splice方法使用异常问题

这和Vue无关，完全是JavaScript中Array.splice()方法的原生特性：

• splice()方法用于删除、替换或添加数组元素，它的返回值是被删除元素组成的数组——哪怕你只删除1个元素，返回的也是包含该元素的长度为1的数组，而不是单个元素。

看你最初的错误代码：

let index = myResults.findIndex(e => e.name === 'Target Element');
myResults.push(myResults.splice(index,1));

这里splice(index,1)返回的是类似[目标对象]的数组，直接用push()把这个数组加进去，会导致myResults末尾多了一个数组元素（而不是你要的单个对象），所以渲染时会出现异常（比如显示[object, object]或者空元素）。

而你最终用的正确代码：

myResults.push(myResults.splice(index,1)[0]);

通过[0]从splice返回的数组里取出唯一的目标对象，再push到数组末尾，就实现了把指定元素移到列表最后的效果。

另外提一句，你之前的过滤代码可以简化：
原代码：

let myResults = _.orderBy(this.search_result, 'rank', 'desc').filter(service => (service.rank >= 5)? service: "");

filter()方法会保留回调返回真值的元素，直接返回条件判断结果更清晰，不需要三元表达式：

let myResults = _.orderBy(this.search_result, 'rank', 'desc').filter(service => service.rank >= 5);

内容的提问来源于stack exchange，提问作者tanbog