uni-app vue3版本中 @input 监听事件导致用户输入问题末尾增加了英文逗号

uni-app vue3版本中 @input 监听事件导致用户输入问题末尾增加了英文逗号

开发环境 版本号 项目创建方式
HBuilderX 3.4.7 -

产品分类：HbuilderX
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：12.3.1 (21E258)

示例代码：

<input type="text" class="uni-input" v-model="data.form.shipperyang" [@input](/user/input)="searchboxopen(data.form.shipperyang)"  placeholder="请输入抬头名称(可检索)" maxlength=20 />

export default {
  setup() {
    const data = reactive({
      form: {
        shipperyang: ''  // 抬头单位
      }
    })
    const searchboxopen = () => {
      console.log(data.form.shipper)
    }
    return {
      data,
      searchboxopen
    }
  }
}

操作步骤：

<input type=“text” class=“uni-input” v-model=“data.form.shipperyang” @input=“searchboxopen(data.form.shipperyang)” placeholder=“请输入抬头名称(可检索)” maxlength=20 />


### 预期结果：

<input type="text" class="uni-input" v-model="data.form.shipperyang" [@input](/user/input)="searchboxopen(data.form.shipperyang)"  placeholder="请输入抬头名称(可检索)" maxlength=20 />

实际结果：

<input type=“text” class=“uni-input” v-model=“data.form.shipperyang” @input=“searchboxopen(data.form.shipperyang)” placeholder=“请输入抬头名称(可检索)” maxlength=20 />


更多关于uni-app vue3版本中 @input 监听事件导致用户输入问题末尾增加了英文逗号的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

录个视频

更多关于uni-app vue3版本中 @input 监听事件导致用户输入问题末尾增加了英文逗号的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我已经知晓什么问题出现的BUG。 HBuilderX版本号： 3.4.7 input 事件函数返回 Promise 时，输入框 官方修复了

我这边在HBuilder 3.4.12-alpha中还是遇见了同样的问题，@input是一个异步搜索功能，请问怎么解决

在 uni-app 中使用 Vue 3 时，如果你在 @input 事件监听器中直接修改输入框的值，可能会导致一些意想不到的问题，比如在输入内容的末尾自动添加了英文逗号。这通常是因为你在 @input 事件中直接修改了 v-model 绑定的值，导致输入框的值被重新渲染，从而触发了额外的输入事件。

解决方法

  1. 避免在 @input 中直接修改值

    如果你在 @input 事件中直接修改了 v-model 绑定的值，可能会导致输入框的值被重新渲染，从而触发额外的输入事件。你可以尝试在 @input 事件中只处理逻辑，而不直接修改 v-model 绑定的值。

    <template>
  <input v-model="inputValue" @input="handleInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputValue = ref('');

    const handleInput = (event) => {
      // 你可以在这里处理输入逻辑，但不直接修改 inputValue
      console.log(event.target.value);
    };

    return {
      inputValue,
      handleInput,
    };
  },
};
</script>

  2. 使用 @input 和 v-model 分离

    如果你想在 @input 事件中处理输入逻辑，并且还需要更新 v-model 绑定的值，可以使用 event.target.value 来更新 v-model 绑定的值，而不是直接修改它。

    <template>
  <input :value="inputValue" @input="handleInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputValue = ref('');

    const handleInput = (event) => {
      inputValue.value = event.target.value;
      // 你可以在这里处理其他输入逻辑
      console.log(inputValue.value);
    };

    return {
      inputValue,
      handleInput,
    };
  },
};
</script>

  3. 使用 watch 监听 v-model 的变化

    如果你需要在输入值发生变化时执行一些逻辑，可以使用 watch 来监听 v-model 绑定的值的变化。

    <template>
  <input v-model="inputValue" />
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const inputValue = ref('');

    watch(inputValue, (newValue) => {
      // 你可以在这里处理输入值变化后的逻辑
      console.log(newValue);
    });

    return {
      inputValue,
    };
  },
};
</script>
回到顶部