В Vue.js, выбор целевого элемента можно сделать с помощью директивы v-on:click или события @click.
Например, если у вас есть кнопка, и вы хотите получить доступ к ее элементу при клике, вам нужно добавить директиву v-on:click или обработчик события @click к элементу кнопки. Внутри обработчика события можно получить доступ к целевому элементу с помощью объекта события, который автоматически передается в функцию обработчика.
Вот пример:
<template>
<button v-on:click="handleClick">Нажми меня</button>
</template>
<script>
export default {
methods: {
handleClick(event) {
const targetElement = event.target;
console.log(targetElement);
},
},
};
</script>
В этом примере, если вы нажмете на кнопку, функция handleClick будет вызвана, и внутри этой функции с помощью event.target будет получен доступ к целевому элементу (кнопке). Этот элемент может быть использован для выполнения различных действий, таких как изменение его стилей, добавление или удаление классов и т.д.
Также, в Vue.js есть возможность использовать референсы для выбора целевых элементов. Референсы позволяют нам получить доступ к DOM-элементам напрямую без необходимости использования событий.
Вот пример использования референса:
<template>
<button ref="myButton">Нажми меня</button>
</template>
<script>
export default {
mounted() {
const targetElement = this.$refs.myButton;
console.log(targetElement);
},
};
</script>
В этом примере, после монтирования компонента, мы получаем доступ к кнопке через референс myButton, используя this.$refs.myButton. Мы можем сделать это в хуке mounted, который вызывается после того, как компонент был вставлен в DOM.
Оба этих примера демонстрируют, как можно выбрать целевой элемент в Vue.js. Используйте тот, который лучше подходит для вашей конкретной ситуации.