Level 60
<input ref="inputField" type="number">
<button @click="fire('inputField')" type="button">Button</button>
function fire (i) {
this.$refs[i].classList.add('hidden');
}
1 like
May 31, 2022
4
Level 14
weird refs in Vue 3
I read the recommendations not to use document query selectors in vue.js. We need to use refs, but it is weak documentation to do such a simple thing, for example:
//template
<input ref="inputField" type="number">
<button @click="fire(id)" type="button">Button</button>
//script setup
function fire (i) {
document.querySelectorAll('input')[i].classList.add("hidden")
}
This is working, but how can I do this with refs?
Level 59
If you're using script setup, then:
<template>
<input ref="input" type="number">
<button @click="fire" type="button">Button</button>
</template>
import {ref} from 'vue';
let input = ref(null);
function fire() {
input.value.classList.add("hidden")
}
That said, not sure what you're doing here, but I probably wouldn't resort to manually editing the classList.
1 like
Level 14
@jeffreyway @sergiu17 I have a list of inputs from v-for loop. I don´'t want to make sub-components of single input. I want to add index to them, and manipulate. I'm strugle to do that. I am not sure is it possible. I saw that vue 3 has bug with template refs in array :( https://github.com/vuejs/core/issues/5525
Level 60
@Ajvanho add a new property to your list of inputs
<template>
<section v-for="input in inputs" :key="input.id">
<label>
{{ input.name }}
<input :class="{ 'hidden': input.hidden }"/>
</label>
<button @click="fire(input)">Click</button>
<input type="checkbox" v-model="input.hidden">
</section>
</template>
<script setup>
import { ref } from 'vue';
let inputs = ref([
{id: 1, name: 'Name', hidden: false},
{id: 2, name: 'Email', hidden: false},
]);
function fire(input) {
input.hidden = true;
}
</script>
1 like
Please or to participate in this conversation.