Как сделать живой поиск на vue.js

150

21 сентября 2019, 20:50

Есть набор данных такого вида

{
  "id": "448",
  "text": "Инструкции вида 123",
  "childs": {
    "168": {
      "id": "168",
      "name": "Инструкция к товару А168",
      "link": "/download/168.zip"
    },
    "1689": {
      "id": "1689",
      "name": "Инструкция к товару Б1689",
      "link": "/download/1689.zip"
    },
    "390": {
      "id": "390",
      "name": "Инструкция к товару В390",
      "link": "/download/390.zip"
    }
  }
}

Нужно реализовать поиск, чтобы при вводе, например, А168 возвращались данные такого вида:

{
  "id": "448",
  "text": "Инструкции вида 123",
  "childs": {
    "168": {
      "id": "168",
      "name": "Инструкция к товару А168",
      "link": "/download/168.zip"
    }
  }
}

Пример того, как я пытался безуспешно это реализовать:

computed: {
    postList_n() {
        return this.postList.filter(item => {
            return item.childs.name.toLowerCase().includes(this.search.toLowerCase())
        })
    }
},

Answer 1

postList_n() {
  let obj = this.postList.childs;
  let newArray = [];
  const serach = this.search.toLowerCase();
  for (key in obj) {
    el = obj[key]
    if (el.name.toLowerCase().indexOf(serach) != -1) newArray.push(el);
  }     
  return newArray;
}

Вот пример на codepen