Для получения всех input на странице с использованием фреймворка Vue.js, вы можете воспользоваться встроенным механизмом привязки данных и директивой v-model.
Директива v-model позволяет связать данные с элементом ввода на странице. Когда пользователь изменяет значение элемента ввода, данные автоматически обновляются. Таким образом, вы можете наблюдать за изменениями значений input и работать с ними.
Здесь пример, как вы можете получить все input на странице через Vue.js:
1. Определите новый Vue экземпляр:
new Vue({
el: '#app',
data: {
inputs: []
},
methods: {
handleInput: function(event) {
// Обработчик события ввода
// Добавляет или удаляет значение input из массива inputs в зависимости от действий пользователя
const value = event.target.value;
if (event.target.checked) {
this.inputs.push(value);
} else {
const index = this.inputs.indexOf(value);
if (index > -1) {
this.inputs.splice(index, 1);
}
}
}
}
});
2. В вашем HTML коде добавьте элемент с id "app" и привяжите ваши данные и обработчик события ввода с помощью директивы v-model и @input:
<div id="app"> <input type="checkbox" value="input 1" v-model="inputs" @input="handleInput"> Input 1 <input type="checkbox" value="input 2" v-model="inputs" @input="handleInput"> Input 2 <input type="checkbox" value="input 3" v-model="inputs" @input="handleInput"> Input 3 </div>
В данном примере, при изменении состояния любого из input'ов, метод handleInput будет вызываться и обновлять массив inputs.
Теперь вы можете использовать массив inputs для дальнейшей обработки или отправки на сервер.
Это простой пример, демонстрирующий основные возможности работы с input элементами на странице через Vue.js. Вы можете дополнить код и адаптировать его в соответствии с вашими потребностями и требованиями проекта.