One of the challenges I'm facing involves setting focus on the first textfield when a button is pressed.
I found a code snippet in the playground without using v-for and it works perfectly fine.
However, as soon as I introduce v-for into the code, everything crashes. I tried another example in the playground with v-for, and the program crashes when the button is pressed.
I am unable to pinpoint where I went wrong and how to fix this issue to make the code function correctly.
<template>
<Page>
<ActionBar title="Home" />
<ScrollView>
<StackLayout class="home-panel">
<Label textWrap="true" text="Test focus()!"
class="h2 description-label" />
<TextField v-for="(item, index) in array"
v-model="array[index]" :key="'key'+index"
:ref="'ref' + index" />
<Button text="Button" @tap="onButtonTap" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
methods: {
onButtonTap() {
console.log("Button was pressed");
this.$refs["ref0"].nativeView.focus();
}
},
data() {
return {
array: ["Hello", "World!"]
};
}
};
</script>