Vue过滤对象属性

Question

我有一个这样的对象数组（大陆）：

data() {
    return {
        continents: [
            {
                name: "South America",
                countries: [
                    {
                        name: "Paraguay"
                    },
                    {
                        name: "Chile"
                    }
                ]
            },
            {
                name: "North America",
                countries: [
                    {
                        name: "Costa Rica"
                    },
                    {
                        name: "Mexico"
                    }
                ]
            }
        ]
    }
}


// 6 continents and over 250 countries within.

我试图像这样用v-model 'filter' 过滤它

computed: {
    filtered() {
        return this.continents.filter(continent => {
            continent.countries = continent.countries.filter(country => {
                return country.name.match(new RegExp(this.filter, 'i'));
            });
            return continent.countries.length;
        });
    }
}

并使用v-for 指令渲染它，如下所示：

<input v-model="filter" type="text">
<div v-for="continent in filtered" v-if="filtered.length" class="countries-group">
    <h4>{{ continent.name }}</h4>
    <ul class="country-list">
        <li v-for="country in continent.countries" class="country-item">{{ country.name }}</li>
    </ul>
</div>

它几乎可以工作，但是我的计算属性过滤修改了原始国家数据，所以当我尝试退格过滤器v-model 时，它不会返回初始化数据，因为它已经被过滤对象覆盖。

Answer 1

我的计算属性过滤修改了原始国家数据

你不应该这样做。不要修改计算属性中的状态，因为它可能会触发重新评估其他计算属性并导致令人困惑的错误。计算属性是指以某种方式转换（不改变）组件状态的纯函数。

试试这个：

filtered() {
  const filter = this.filter.toLowerCase();

  return this.continents
    .map(continent => Object.assign({}, continent, {
      countries: continent.countries.filter(country => {
        return country.name.toLowerCase().includes(filter);
      }),
    })
    .filter(continent => continent.countries.length);
}