Почему работает filter для объекта, что он делает?

Question

[wufapexef]

Разбираюсь в жутком плагине Vue Isotope.

Там для фильтрации элементов используется вот что

filter: function (key) {
      this.$refs.cpt.filter(key)
    }

Но ведь this.$refs.cpt это объект а не массив. Не могу понять что происходит, что делает этот код?

Answer 1

[Антон Спирин]

Видимо, потому что в исходном коде плагина реализована своя функция filter

К слову о возможности применения методов массивов на объектах. Вот этот код отлично работает:

const obj = {
  '0': 'some value 0',
  '1': 'some value 1',
  '2': false,
  length: 3,
};

const filteredArr = Array.prototype.filter.call(obj, el => el);
console.log(filteredArr); // ["0 value", "1 value"]

Массив это лишь особый вид объекта с особым набором ключей и дополнительными методами в прототипе.

Comments

[wufapexef]

При чем тут исходный код плагина?

[Антон Спирин]

wufapexef, при том, что вы используете компонент плагина и вызываете его метод через refs как this.$refs.cpt.filter.

[wufapexef]

Антон Спирин, спасибо, енмного яснее. Все равно плагин жутковатый, столько всего намешано...

Answer 2

[0xD34F]

Но ведь this.$refs.cpt это объект а не массив.

Откуда такая информация? Как именно определён cpt вы почему-то решили не показывать, а если ref используется совместно с v-for (на том же элементе, или дочерних) - будет массив.

Comments

[wufapexef]

Я вывел в консоль и видно что это объект. Потом сделал typeof тоже сказал Object.

Определен он так:

<isotope ref="cpt" id="root_isotope1" :list="list" :options='option' @filter="filterOption=arguments[0]">
        <div v-for="(element, index) in list" class="element-item"  :key="index">
          <h3 class="name">{{element.name}}</h3>
        </div>
      </isotope>

[0xD34F]

wufapexef, а, так ref на экземпляре компонента определён. Ну, смотрите тогда соответствующий метод компонента - это совсем не тот filter, который у массивов.