javascript - 使用 array.filter 在 Vue 应用程序中过滤控制 v-for 的数组使用相等但不是 RegExp

Question

我想在文本框中搜索并根据属性是否与输入的文本匹配来过滤对象列表。

filteredBuildings 数组中的每个对象都会在 Google map 上创建一个形状。

我的 Vue 应用程序中有以下内容:

...

data: {
    searchtext: '',
    buildings: [
        {
            name: 'Home',
            ...
        },{
            name: 'Work',
            ...
        }
    ],
},
computed: {
    filteredBuildings () {
        if( this.searchtext == '' )
            return this.buildings;

        const re = new RegExp( this.searchtext, 'i' );
        return this.buildings.filter( b => {
            // return b.name === this.searchtext;
            // return b.name.toLowerCase().indexOf( this.searchtext.toLowerCase() ) > -1;
            return re.test(b.name);
        });
    },
},

...

而且模板很复杂，但是像这样:

// the main component
<div id="app">

    <GoogleMapPolygon v-for="b in filteredBuildings"
        :key="b.id"
        :id="b.id"
        :name="name"
        ...
    />

</div>

// the GoogleMapPolygon component
// (no <template>)
... 
data: {
    polygon: null,
    ...
},
mounted () {
    this.polygon = new google.maps.Polygon({
        map: map,
        ...
    });
    ...
},
destroyed () {
    this.polygon.setMap(null);
},
render () { 
    return false; 
},

如果我取消注释 === 匹配的行，它就可以正常工作。如果我使用 indexOf 匹配或 RegExp .test()，我会收到以下错误:

[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

并且该应用程序完全停止运行。

RegExp 或 indexOf 花费的额外时间似乎足以导致问题。这让我想到了 nextTick()，但我不确定我会把它放在哪里。

Answer 1

问题来自修改建筑物数组(v-for 指令中使用的元素)太快。根据错误判断，Vue 正在使用这些元素作为引用点来插入其他数组项，但是当 Vue 尝试插入新元素时，引用 DOM 元素已经消失。

这可能可能只是 Vue 与 Google map 交互的问题

解决方案是将正在迭代的组件包装在一个元素中，该元素在切换其他部分时不会消失。例如(来 self 原来的问题代码):

<div id="app">

  <section>
    <GoogleMapPolygon v-for="b in filteredBuildings"
        :key="b.id"
        :id="b.id"
        :name="name"
        ...
    />
  </section>

</div>

我在删除一个标记并将其替换为紧随其后的另一个标记时也遇到了这个问题，这也解决了该问题:

<section>
    <GoogleMapMarker 
        v-if="this.zoom > 15"
        :key="'you-are-here-marker'"
        :lat="currentLat"
        :lng="currentLng"
    />
</section>

<section>
    <GoogleMapMarker
        v-if="this.zoom < 16"
        :key="'campus-center-marker'"
        :lat="campusCenter.lat"
        :lng="campusCenter.lng"
    />
</section>

在添加部分标签之前，当这两个组件在 this.zoom 更改时尝试销毁和创建时，我遇到了同样的错误。