vue Array.from排除空值

你可以使用 `Array.from` 方法来排除数组中的空值。以下是一个使用 Vue 的示例代码：

data() {
  return {
    array: [1, 2, null, 3, undefined, 4, '', 5]
  };
},
computed: {
  filteredArray() {
    return Array.from(this.array).filter(item => item !== null && item !== undefined && item !== '');
  }
}

在这个例子中，我们使用 `Array.from` 将 `this.array` 转换为一个新的数组，并使用 `filter` 方法来排除空值。在 `filteredArray` 计算属性中，只有非空值的元素会被保留。你可以在模板中使用 `filteredArray` 来显示过滤后的数组。

<div v-for="item in filteredArray" :key="item">
  {{ item }}
</div>

这样，只有非空值的元素会被渲染到页面上。

相关问题

vue 数组 json.stringify 变为空值

当使用JSON.stringify方法将Vue数组转化为JSON字符串时，可能会出现变为空值的情况。

最常见的原因是Vue的数据响应机制。Vue使用了观察者模式来跟踪数据的变化，当数组中的元素发生变化时，Vue会自动更新视图。然而，在使用JSON.stringify方法时，它只能序列化JavaScript对象，并不会序列化Vue的响应式数据。所以当我们将Vue数组直接传递给JSON.stringify方法时，它会得到一个空的JSON字符串。

解决这个问题的方法是，在使用JSON.stringify之前，先将Vue数组转化为普通的JavaScript数组。这可以通过使用slice方法或者Array.from方法来实现：

var vueArray = [1, 2, 3];
var plainArray = vueArray.slice();
var jsonString = JSON.stringify(plainArray);
console.log(jsonString); // "[1,2,3]"

在上面的例子中，我们使用了slice方法创建了一个新的数组，然后将Vue数组的元素复制到了这个新数组中。最后，我们将新数组传递给JSON.stringify方法进行序列化。

如果你使用的是ES6，你也可以使用Array.from方法来创建新数组：

var vueArray = [1, 2, 3];
var plainArray = Array.from(vueArray);
var jsonString = JSON.stringify(plainArray);
console.log(jsonString); // "[1,2,3]"

总之，当我们需要将Vue数组转化为JSON字符串时，需要先将Vue数组转化为普通的JavaScript数组，然后再进行序列化。这样可以避免JSON.stringify方法返回空值的问题。