javascript - 在Vuejs中动态获取元素的值

我不确定这是否是与Vue或JavaScript直接相关的问题，但是由于它涉及VueJs的“引用”，因此我在此处发布了问题。

我在DOM中有多个输入文本元素。它们被命名为txtScore1，txtScore2，txtScore3等。在单击按钮事件中，我想从txtScore1中获取值。但是，如何在this。$ refs。{{＃动态引用txtScore1的某种方式＃}}。value中动态传递此引用？

我正在创建输入元素，如下所示：
<input v-bind:ref="'txtScore' + props.item.Id" type="text"/>

你能帮忙吗？

谢谢，
米希尔

最佳答案

如果要声明道具数据，则以下是错误的方法：

<input v-bind:ref="'txtScore' + props.item.Id" type="text"/>

您应该只使用item.Id。

对你的问题

您需要在输入处理程序中传递item对象：

<input v-bind:ref="'txtScore' + item.Id" type="text" @input="handler(item)" />

在您的方法中：

methods: { // or, whatever you need
  handler(item) {
    //use ref value like this:
    //this.$refs['txtScore' + item.id].value
  }
}

但是，这实际上是不必要的，您可以简单地使用$ event对象而不是使用$ refs：

<input type="text" @input="handler($event)" />

然后，只需使用以下命令：

handler(event) {
   console.log(event.target.value);
}

甚至更多，为什么不简单地使用v-model？

<input type="text" v-model="item" />