在同一模板vue.js中重复使用相同的搜索组件

Question

我有正常的搜索输入，女巫将搜索并显示一些结果。一切正常，我需要克隆此搜索输入，然后在同一组件中再次使用它。

<input class="search ml-2" type="search" placeholder="Search" v-model="search">

js：

 data() {
            return {
                hubs: [],
                search: '',
            }
        },
computed: {
    filteredList: function () {
        return this.hubs.filter((hub) => {
            return hub.name.toLowerCase().includes(this.search.toLowerCase());
        })
    }
},

我的目标是克隆该搜索，并显示与上一次搜索不同的结果，我该怎么做？我可能需要将此搜索输入克隆两次以上。

第二个seuch输入将独立工作，应返回不同的结果。

Answer 1

我不确定是否要关注您，但是我举了一个例子来说明您可能想要做什么。

如果希望可重用，最好将数组作为1与prop一起传递到要搜索的对象中。

下面是一个演示示例。

key

http://jsfiddle.net/eywraw8t/358621/

Answer 2

您需要一个单独的search属性才能连接到第二个输入的v模型。

您可能还应该将计算出的filteredList属性转换为接受搜索查询字符串的方法。这样，您可以将其重新用于两个输入。