Aurelia技术问题：实现输入框值依赖另一个输入框

要实现这个需求，核心思路是初始阶段让Input2跟随Input1同步更新，当Input2被手动编辑后，切断两者的联动关系。我们可以通过添加一个状态标记来控制是否需要同步，具体修改如下：

1. 调整TS组件代码 #

在组件类中新增一个标记变量追踪Input2的编辑状态，完善数据初始化逻辑，并添加Input1的同步处理方法：

import { MyModel } from '../models/mymodel';
export class MyApp {
  item: MyModel;
  // 标记Input2是否已被手动编辑
  private _isInput2Edited = false;

  constructor() { }

  activate(dto: MyModel) {
    // 修正初始化逻辑：将传入的dto数据赋值给item（原代码new MyModel()会清空数据）
    this.item = Object.assign(new MyModel(), dto);
  }

  // Input1内容变化时触发的同步方法
  onInput1Change() {
    // 仅当Input2未被编辑过时，同步更新Input2的值
    if (!this._isInput2Edited) {
      this.item.input2 = this.item.input1;
    }
  }

  // Input2被编辑时触发的标记方法
  onInput2Edit() {
    // 标记Input2已手动编辑，后续不再受Input1影响
    this._isInput2Edited = true;
  }
}

2. 修改HTML模板 #

给两个textarea绑定对应的事件，同时保留双向绑定逻辑：

<template>
  Input1 
  <textarea 
    name="" 
    value.bind="item.input1" 
    placeholder=""
    input.delegate="onInput1Change()"
  ></textarea>

  Input2 
  <textarea 
    name="" 
    value.bind="item.input2" 
    placeholder=""
    input.delegate="onInput2Edit()"
  ></textarea>
</template>

逻辑说明 #

• 初始状态：_isInput2Edited为false，此时Input1的所有输入都会同步到Input2中。
• 编辑Input2后：触发onInput2Edit()将标记设为true，后续Input1的变化不会再影响Input2，Input2可独立编辑。
• 如需重置联动（比如重新加载数据），只需在合适时机将_isInput2Edited重置为false即可。

内容的提问来源于stack exchange，提问作者hyphens2