javascript - 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

my computed property filtered modifies the original contries data

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

试试这个:

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