Javascript 使用子元素数据的v-for循环的条件过滤器

我有一组从api获取的项。下面是我从服务器接收的数据示例

{
    {"name": "example1", "price": 11, "vendor": "vendor_name1" },
    {"name": "example2", "price": 12, "vendor": "vendor_name2" },
    {"name": "example3", "price": 13, "vendor": "vendor_name3" },
}

这些循环项中的每一项都被分配了数据属性

edit:false

，该属性根据偏好从false切换到true。是否有一种方法可以设置选择性的“filterBy”，只过滤编辑为false和跳过过滤编辑为true的项目

请参见示例：

---

谢谢。

您可以设置自定义筛选器：

那么在你看来，它看起来像：

<div v-for="product in products | editing"></div>

---

我通过克隆我编辑的项目实现了它。通过添加$removeBy方法和$clone

Vue.prototype.$removeBy = ( arr, key, val ) => {
    let index = arr.findIndex( ( e ) => e[ key ] === val );
    if ( index > -1 ) {
        arr.splice( index, 1 );
    }
};

Vue.prototype.$clone = ( obj ) => {
    var target = {};
    for ( var i in obj ) {
        if ( obj.hasOwnProperty( i ) ) {
            target[ i ] = obj[ i ];
        }
    }
    return target;
};

工作示例如下

---

您可以使用edit:false和

var noEdit=obj.filter（函数（x）{return！x.edit}）

获取所有对象，然后对该结果执行您需要的任何计算。问题是对象被传递给子组件。和编辑：从内部指定false。vue.js在父范围中看不到该属性。它只看到从服务器获取的属性。它不会工作，因为从子元素和父元素中分配的“编辑”属性不知道它。您的筛选器将不返回任何内容，因为products数组中没有edit这样的属性。请参见示例。然后您需要将更改同步回父级。如果要在数组上使用

过滤器by

，则需要将

编辑

作为产品对象的属性，而不是像

：products=“products”

那样指定道具。如果需要，可以在

Product

组件上的

ready（）

函数中执行此操作

Vue.prototype.$removeBy = ( arr, key, val ) => {
    let index = arr.findIndex( ( e ) => e[ key ] === val );
    if ( index > -1 ) {
        arr.splice( index, 1 );
    }
};

Vue.prototype.$clone = ( obj ) => {
    var target = {};
    for ( var i in obj ) {
        if ( obj.hasOwnProperty( i ) ) {
            target[ i ] = obj[ i ];
        }
    }
    return target;
};