主页 / user-5476578

Eugene Karataev's questions

Martin Hope
Eugene Karataev
Asked: 2024-12-16 12:54:27 +0800 CST
  • 7

考虑一个带有文本输入的简单 Vue 组件（链接）。

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

const msg = ref('')

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') value = '';
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

我想禁用此输入中的第一个空格，即如果用户输入空格，则输入字段应保持为空。但不起作用。我猜这是因为 Vue 检查了msg没有变化并拒绝了组件渲染。

我的下一次尝试是强制渲染组件（链接）。

<script setup>
import {getCurrentInstance} from 'vue'
import { ref } from 'vue'

const msg = ref('')

const instance = getCurrentInstance();

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') {
    value = '';
    msg.value = value;    
    instance?.proxy?.$forceUpdate();
    return;
  }
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

它可以工作，但有限制。我的项目有一个很大的组件树，并且$forceUpdate只更新当前组件，没有子组件。

key我也尝试通过改变组件来重新渲染整个子三，但在这种情况下我失去了输入的焦点。

总而言之，我似乎错过了一些东西。我不敢相信如此简单的任务需要奇怪的解决方法。请帮我找到一种简单且“最佳实践”的方法来禁用 html 输入中的第一个空格。

PS React 版本按预期工作。

import React, {useState} from 'react';

export function App(props) {
  const [value, setValue] = useState('');

  function onInput(e) {
    let v = e.target.value;
    if (v === ' ') v = '';
    setValue(v);
  }

  return (
    <div className='App'>
      <input value={value} onInput={onInput} />
    </div>
  );
}
vuejs3