[ VUE ] Как найти элемент по его свойству?

Question

[Сева]

Простой компонент, радиобаттоны.

<radiobuttons :buttons="[{ label: '50', value: '50' }, { label: '100', value: '100' }, { label: '300', value: '300', default: true }]" v-model="q.limit"></radiobuttons>

<template>
  <div class="btn-group" style="display: block; margin-bottom: 10px; overflow: hidden;">
    <button v-for="(button, index) in buttons" :key="index" @click="select($event, button.value)" class="btn btn-default" type="button">{{ button.label }}</button>
  </div>
</template>

Хочу после mounted найти ту, у которой есть свойство default, равное true, и вызвать на ней click().
Как найти? Спасибо.

Answer 1

[lavezzi1]

const defaultButton = this.buttons.find(btn => btn.default); // найдет объект

если хочешь найти все (большей одной)

const defaultButtons = this.buttons.filter(btn => btn.default); // массив с найденными объектами

p.s а зачем на ней делать клик?

Comments

[Сева]

Мне нужен не объект, мне нужен DOM узел соответсткующий. Потому что по клику применяются стили и значение уходит в родительский компонент.

[lavezzi1]

Сева, Понял. У вас неверная логика. Сделайте так:

<script>
 computed: {
    activeButton() { return this.buttons.find(btn => btn.default); }
 }
</script>

<template>
  <div class="btn-group" style="display: block; margin-bottom: 10px; overflow: hidden;">
    <button v-for="(button, index) in buttons" :key="index" @click="select($event, button.value)" class="btn btn-default" :class="[this.activeButton.value === button.value? 'btn-active': '']" type="button">{{ button.label }}</button>
  </div>
</template>

[lavezzi1]

Это как пример. Можно сделать еще проще через метод, в котором сразу сравнивать с текущей кнопкой дефолтную.

[lavezzi1]

Сева, Вы мыслите чистым js. Во vue все декларативно и во всех простых случаях не надо искать дом элементы и кликать их.

[Сева]

lavezzi1, и как в родительский компонент попадет нужное значение? Только стили применятся.

methods: {
    select($event, value) {
      this.$emit('input', value);
      Array.from($event.target.parentNode.querySelectorAll('.btn')).forEach(button => button.classList.remove('selected'));
      $event.target.classList.add('selected');
    }
  }

Так, наверное, будет понятнее.

[Сева]

А, ну хотя наверное можно сделать как-нибудь так:

mounted() {
  let default = this.buttons.find(btn => btn.default);
  this.$emit('input', default.value);
}

Спасибо

[lavezzi1]

Сева, вариантов масса. Например, делаете метод, находите в нем нужный объект, если нашли то сравниваете с баттоном из for, стили применяются, а дальше в этом же методе пишите

this.$emit('input', defaultButton.value); // value из найденого объекта

если же нет, выкидываете ошибку через

throw new Error('You should provide at least one default button.')