Vue.js 无状态（受控）输入

无状态输入意味着它只有在父项的值绑定发生更改时才会更改。它可以完全控制显示内容，这对于遮罩和过滤器很有用

我所拥有的 此解决方案是最接近我需要的解决方案：

现有解决方案的问题 当我试图在现有文本的中间键入某个东西时，光标跳到最后。

我需要什么 无状态输入的任何工作解决方案或修复现有输入的方法

我找到的材料 反应小提琴为信用卡输入http://jsbin .com/dunutajuqo

---

它正在跳跃，因为您正在手动为字段赋值。您不需要在输入事件期间重新设置该值。此时该值已同步。在此处发布完整的代码简介，以便其他人了解上下文：

<template>
  <input
    class="com-input"
    :value="value"
    @input="setValue"
    :placeholder="placeholder"
  >
</template>

<script>
export default {
  name: "ComInput",
  props: {
    value: {
      type: String
    },
    placeholder: {
      type: String
    }
  },
  methods: {
    setValue($event) {
      const value = $event.target.value;
      $event.target.value = this.value; // <-- DELETE THIS
      this.$emit("input", value);
    }
  }
};
</script>

---

您可以有一个无状态输入，其值仅在父项更改时更改，并且可以禁用该输入。如果您想输入，那么这仍然意味着输入是无状态的？通过这种方式，您不会通过父绑定更改值，而是通过更改事件更改值。因此，我认为您可以在输入上添加onChange事件，并通知父级将绑定值更改为新值。@Jorj onChange的问题是它会杀死反应性。例如，当用户键入时，输入将允许键入文本。但只有在按Enter键或模糊时，才会应用结果。但常见的情况是防止用户从一开始就键入我不希望他纠正的内容。删除这一行会使第一次测试通过，但测试2-4会失败。@YauheniPrakopchyk您必须详细说明，这些测试是如何工作的，我希望我将使用示例ComMacAddressInput添加到沙箱中。希望这能表达我从无状态输入中需要的功能。