Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算

需求：computed计算属性的应用一般会是几个互不影响的值计算，本次需求是多个值互相引用计算

效果图

注：computed多个值单独已用计算时，会报错，Vue computed 报错：Computed property was assigned to but it has no setter 解决办法就是 换一种写法，组件中定义的computed属性缺少setter,使用过computed 都应该知道，该错误提示通常发生在组件内为computed属性赋值的时候，如果没有显示的声明setter，控制台则会打印如上错误。那么顺着这个方向，继续排查错误,其次检查代码中是否有给num进行赋值，第一次检查，好像整个代码逻辑从未操作过num属性，怎么会涉及到给num赋值呢？ 不管怎么疑惑，错误的确发生了。继续定位对num属性的操作，直到我看到v-model=“num”。现在一切都解释得通了，正是v-model的双向绑定属性实现了对num 的赋值。解决办法通过上面的分析，错误及原因已经找到，怎么解决就比较简单了，只需在声明computed属性时显示的声明setter即可。

这种错误解决办法:https://blog.csdn.net/weixin_44670973/article/details/109074967

sumZongji() {
        return (
          Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
        )
      },

完整代码：

data(){
return{
      params: {
          jiaozhong: '',
          radio: '原稿',
          booknames: '',
          jiaozhong: '',
          daji: '',
        },
}
}
//计算属性
computed:{
 sumZongji() {
        return (
          Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
        )
      },
      zhengji: {
        get() {
          return (
            parseFloat(this.params.zhengzhong) +
            1 -
            parseFloat(this.params.zhengshi)
          )
        },
        set(s) {},
      },
      daji: {
        get() {
          return (
            parseFloat(this.params.dazhong) + 1 - parseFloat(this.params.dashi)
          )
        },
        set(v) {},
      },

}
//页面Dom
<el-row>
            <el-col :span="12">
              <el-form-item label="正始:">
                <el-input
                  v-model="params.zhengshi"
                  name="正始"
                  type="number"
                  placeholder="请输入"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="正终:">
                <el-input
                  v-model="params.zhengzhong"
                  name="正终"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="答始:">
                <el-input
                  v-model="params.dashi"
                  name="答始"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="答终:">
                <el-input
                  v-model="params.dazhong"
                  name="答终"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="答题纸:">
                <el-input
                  v-model="params.datizhi"
                  name="答题纸"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div
          v-if="
            params.jiaozhong != '核红' &&
            params.jiaozhong != '其他' &&
            params.jiaozhong != '分项检查'
          "
          class="yeshu"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="页数:"></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="正计:">
                <el-input
                  v-model="zhengji"
                  disabled
                  type="number"
                  name="正计"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="答计:" label-width="50px">
                <el-input
                  v-model="daji"
                  type="number"
                  disabled
                  name="答计"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总计:" label-width="50px">
                <el-input
                  v-model="sumZongji"
                  type="number"
                  disabled
                  name="总计"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>