javascript - Vuejs动态获取element的值

Question

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

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

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

你能帮忙吗？

谢谢，米希尔

Answer 1

如果你要声明 props 数据，那么以下是错误的方式:

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

您应该只使用item.Id。

对于你的问题，

您需要在输入处理程序中传递项目对象:

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