javascript - 如何使用 Vue 控制 <input> 元素的内容？

Question

我想完全控制 <input> 的内容元素。

使用 React，我可以这样做:

import { useState } from "react";

function Form() {
  const [value, setValue] = useState("");

  const onSubmit = (event) => {
    event.preventDefault();
    // Do something with `value`
  };

  const onChange = (event) => {
    const { value } = event.target;
    // For example, users can type only uppercase letters
    if (value === value.toUpperCase()) {
      setValue(value);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input onChange={onChange} value={value} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

但是，在 Vue 中，我无法控制 <input>喜欢:

<script setup>
import { ref } from "vue";

const value = ref("");

const onSubmit = () => {
  // Do something with `value`
};

const onInput = (event) => {
  // For example, users can type only uppercase letters
  if (event.target.value === event.target.value.toUpperCase()) {
    value.value = event.target.value;
  }
};
</script>

<template>
  <form v-on:submit.prevent="onSubmit">
    <input v-on:input="onInput" v-bind:value="value" />
    <button type="submit">Submit</button>
  </form>
</template>

看起来 Vue 无法控制 <input>元素的 value属性和 Vue 的 value ref 不同于 value在 DOM 中。

如何在 Vue 中做与 React 相同的事情？提前谢谢你。

Answer 1

如果您希望 input 元素内容仅在特定条件下更新。

一个解决方案是在 input 事件上，如果条件不满足，您需要使用 ref 值重置 input 元素值匹配。

例如:

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

const inputValue = ref('')
const onSubmit = () => {
  console.log(inputValue.value)
  // Do something with `value`
}

const onInput = (event) => {
  // For example, users can type only uppercase letters
  const value = event.target.value
  if (value === value.toUpperCase()) {
    inputValue.value = value
  } else {
    event.target.value = inputValue.value
  }
}
</script>

<template>
  <form v-on:submit.prevent="onSubmit">
    <input @input="onInput" :value="inputValue" />
    <button type="submit">Submit</button>
  </form>
</template>

这是您正在寻找的实时代码示例。

https://stackblitz.com/edit/vue3-script-setup-with-vite-ze8fvb?file=src/App.vue