函数 focus() 在 Vue 中使用 v-for for for NativeScript 时停止工作

Question

我有很多文本字段，我需要先通过按下按钮来设置焦点。

操场上有一段没有v-for的最小代码，可以正常工作。

但是当我开始使用 v-for 时，程序停止工作。操场上有一段带有v-for的代码，如果我按下按钮，程序就会崩溃。

我不明白我在哪里犯了错误以及我必须做什么才能使这段代码正常工作。

<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>

Answer 1

在使用v-for时，您可以简单地分配一个静态ref并按索引访问其中的项目。

<TextField v-for="(item, index) in array"
v-model="array[index]" :key="'key'+index" ref="myTxt" />
.....
onButtonTap() {
console.log("Button was pressed");
this.$refs.myTxt[0].nativeView.focus();
}