vue 中如何用computed 实现 两个input 值相加 实时显示到 另一个input 值上

Question

基本工资 + 绩效工资 = 应发工资
应发工资 - 社保扣除 = 实发工资
是找个样子的，小白一个， 请大神指教，
请尽量详细一点

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<Form  :label-width="100" :model="popp" :mode="mode">
          <div v-width="500" v-height="400">
            <FormItem label="姓名" prop="name" >
              <input type="text" v-model="popp.name" :disabled="true">
            </FormItem>
            <FormItem label="部门" prop="department">
              <input type="text" v-model="popp.department" :disabled="true">
            </FormItem>
            <FormItem label="出勤天数" prop="duty">
              <input type="text" v-model="popp.duty" >
            </FormItem>
            <FormItem label="基本工资" prop="basic" >
              <input type="number" step="0.1" v-model="popp.basic" >
            </FormItem>
            <FormItem label="绩效工资" prop="perf"  >
              <input type="number" step="0.1" v-model="popp.perf" >
            </FormItem>
            <FormItem label="社保扣除" prop="social">
              <input type="number" step="0.1" v-model="popp.social" >
            </FormItem>
            <FormItem label="应发工资" prop="should" >
              <input type="number" step="0.1" v-model="popp.should" @input="a1"  >
            </FormItem>
            <FormItem label="实发工资" prop="actual" >
              <input type="number" step="0.1" v-model="popp.actual" @input="a2" >
            </FormItem>
            <FormItem label="备注" prop="remark">
              <input type="text" v-model="popp.remark" >
            </FormItem>
          </div>
          <div style="text-align:center;">
            <button class="h-btn"  @click="submit">保存</button>
            <button class="h-btn" @click="crose">放弃</button>
          </div>
        </Form>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

剩下的一个同理；

<div class="form">
        <form action="">
            <div>
                <label for="">基本工资</label>
                 <input type="text" v-model="popp.basic">
            </div>
             <div>
                <label for="">绩效工资</label>
                 <input type="text" v-model="popp.perf">
            </div>
             <div>
                <label for="">应发工资工资</label>
                 <input type="text" v-model="should">
            </div>
        </form>
    </div>

data () {
    return {
      popp: {
        basic: 2200,
        perf: 1000
      }
    }
  },
  computed: {
    should () {
      return parseInt(this.popp.basic) + parseInt(this.popp.perf)
    }
  },

鉴于题主说的，做以下改版，用watch监听

 <div class="form">
        <form action="">
            <div>
                <label for="">基本工资</label>
                 <input type="text" v-model="popp.basic">
            </div>
             <div>
                <label for="">绩效工资</label>
                 <input type="text" v-model="popp.perf">
            </div>
             <div>
                <label for="">应发工资工资</label>
                 <input type="text" v-model="popp.should">
            </div>
        </form>
    </div>

js代码，使用watch监听

data () {
    return {
      popp: {
        basic: 0,
        perf: 0,
        should: 0
      }
    }
  },
  watch: {
    popp: {
      handler (val, oldVal) {
        val.should = parseInt(val.basic) + parseInt(val.perf)
      },
      deep: true
    }
  }

Answer 2

看下这个示例是不是你想要的:示例

Answer 3

1. 整体代码段 在这里

<Table border :datas="abc" stripe  @trdblclick='alertt'>
        <TableItem title="时间" prop="date">
          
        </TableItem>
        <TableItem title="姓名" prop='name'>
          
        </TableItem>
        <TableItem title="部门" prop='department'>
          
        </TableItem>
        <TableItem title="职位" prop='post'>
          
        </TableItem>
        <TableItem title="出勤天数" prop='duty'>
          
        </TableItem>
        <TableItem title="基本工资" prop='basic'>
          
        </TableItem>
        <TableItem title="绩效工资" prop='perf'>
          
        </TableItem>
        <TableItem title="社保扣除" prop="social">
          
        </TableItem>
        <TableItem title="应发工资" prop="should">
          
        </TableItem>
        <TableItem title="实发工资" prop="actual">
          
        </TableItem>
        <TableItem title="备注" prop="remark">
          
        </TableItem>
      </Table>
      <!-- 弹窗开始 -->
      <Modal v-model="opened"  :hasDivider="true" :closeOnMask="false" :middle="true">
        <div slot="header">修改</div>
        <Form  :label-width="100" :model="popp" :mode="mode">
          <div v-width="500" v-height="400">
            <FormItem label="姓名" prop="name" >
              <input type="text" v-model="popp.name" :disabled="true">
            </FormItem>
            <FormItem label="部门" prop="department">
              <input type="text" v-model="popp.department" :disabled="true">
            </FormItem>
            <FormItem label="出勤天数" prop="duty">
              <input type="text" v-model="popp.duty" >
            </FormItem>
            <FormItem label="基本工资" prop="basic" >
              <input type="number" step="0.1" v-model="popp.basic" >
            </FormItem>
            <FormItem label="绩效工资" prop="perf"  >
              <input type="number" step="0.1" v-model="popp.perf" >
            </FormItem>
            <FormItem label="社保扣除" prop="social">
              <input type="number" step="0.1" v-model="popp.social" >
            </FormItem>
            <FormItem label="应发工资" prop="should" >
              <input type="number" step="0.1" v-model="popp.should" >
            </FormItem>
            <FormItem label="实发工资" prop="actual" >
              <input type="number" step="0.1" v-model="popp.actual" @input="a2" >
            </FormItem>
            <FormItem label="备注" prop="remark">
              <input type="text" v-model="popp.remark" >
            </FormItem>
          </div>
          <div style="text-align:center;">
            <button class="h-btn"  @click="submit">保存</button>
            <button class="h-btn" @click="crose">放弃</button>
          </div>
        </Form>
      </Modal>

Answer 4

用watch，你computed出来的属性不能直接双向绑定
而且这三个input触发修改肯定是要写两种逻辑的（加数修改的逻辑和和修改的逻辑）