Uniapp @input事件得到的值是undefined？

最近在使用Uniapp开发项目时，遇到了一个奇怪的问题：在使用@input事件绑定的文本框中，无法正确获取输入框的值，而是返回了undefined。这让我非常困惑，因为在其他框架和平台中，通常可以轻松地通过input事件获取输入框的值。经过一番探索和研究，终于找到了解决方案，现在与大家分享。

问题分析

首先要明确的是，@input事件应该是可以获取到输入框的值的。根据Uniapp的官方文档，当输入框输入内容时，会触发@input事件，并将输入框的值作为参数传递给事件处理函数。通常，我们可以通过event.target.value来获取输入框的值。

然而，在实际开发中，我发现无论如何尝试，event.target.value始终返回undefined。这很奇怪，因为我在其他框架中从未遇到过这个问题。所以我开始怀疑是我的代码有问题。

解决方案

在研究Uniapp的文档后，我发现了一个小细节：当使用V3版本的Uniapp时，需要将@input事件改为@change事件才能正确获取到输入框的值。

所以，只需将原先的@input事件改为@change事件，问题就可以得到解决了。现在，在输入框中输入内容后，event.target.value将会返回正确的值。

示例代码

<template>
  <view>
    <input type="text" @change="handleInput" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      const inputValue = event.target.value;
      console.log(inputValue);
    },
  },
};
</script>

总结

虽然在Uniapp中使用@input事件得到的值是undefined的问题让人困惑，但通过将事件改为@change事件，就可以解决这个问题。希望这篇博客可以帮助到有遇到类似问题的开发者们。

参考资料

• Uniapp官方文档：https://uniapp.dcloud.io/