时间戳

首页 > 解决方案 > 如何从VueJS中的另一个输入更改输入值

javascript - 如何从VueJS中的另一个输入更改输入值

问题描述

我有两个文本框网格，如下所示： 输入框

目标是用户填写上面的框，然后当他们填写下面的框时，上面的框会自动更新。即，如果您在顶部的第一个框中输入 100，然后在底部的第一个框中输入 75，则第一个框将变为 25。

我尝试使用 onchange() 但没有成功。v-model 的双向绑定似乎会导致一些问题，这是有道理的。任何帮助表示赞赏。

这是填充输入框的 HTML：

> <form v-on:submit.prevent="addNewTask">
    <table>
      <thead>
        <tr>
          <th></th>
          <th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(record, rowIndex) in records" :key="rowIndex">
          <td>{{record.row}}</td>
          <td v-for="(detail, index) in record.details" :key="index">
              <input type="text" v-model="detail.value">
          </td>
        </tr>
      </tbody>
    </table>
    <br><br>
    <table>
      <thead>
        <tr>
          <th></th>
        <th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
          <td>{{recordS.rowS}}</td>
          <td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
              <input type="text" v-model="detailS.value_Spend">
          </td>
        </tr>
      </tbody>
    </table>
    <br><br>
    <button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
      Submit
    </button>

标签： javascriptvue.js

解决方案

首先，将<td>节点拆分为子组件，并在输入更改时将其值发送到父（主）组件。然后使用一种方法计算并设置“其他”框子组件的剩余值（大概保存在一个数组中，您需要在该方法中找到该数组中的正确元素）。更改后的数组将自动更新另一个子组件，因为它已绑定到道具。

推荐阅读