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'过滤器'过滤它

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时，它不返回inited数据，因为它已经覆盖了过滤后的对象。

Answer 1

我的滤出的计算属性修改了原始的contries数据

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

试试这个：

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);
}