写了个牛逼的代码，导致vue 堆栈溢出了

最新推荐文章于 2024-01-20 08:15:38 发布

桃根仙

最新推荐文章于 2024-01-20 08:15:38 发布

阅读量1.4k

点赞数

分类专栏： vuejs 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/taotaobaobei/article/details/123492763

版权

vuejs 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<template>
<div>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
  <el-form v-for="(item,index) in form.products" :inline="true" :model="item" :key="index" class="demo-form-inline">
    <el-form-item label="产品名称">
      <el-input v-model="item.productName" placeholder="产品名称"></el-input>
    </el-form-item>
    <el-form-item label="产品ID">
      <el-input v-model="item.productId" placeholder="产品ID"></el-input>
    </el-form-item>
    <el-form-item label="产品单价">
      <el-input v-model="item.price" placeholder="产品单价"></el-input>
    </el-form-item>
    <el-form-item label="产品数量">
      <el-input v-model="item.number" placeholder="产品数量"></el-input>
    </el-form-item>
    <el-form-item label="税率">
      <el-input v-model="item.tax" placeholder="税率"></el-input>
    </el-form-item>
    <el-form-item label="产品总价">
      <el-input v-model="item.total" placeholder="产品总价"></el-input>
    </el-form-item>
    <el-form-item label="含税总价">
      <el-input v-model="item.taxTotal" placeholder="含税总价"></el-input>
    </el-form-item>
  </el-form>
<!-- {{products}}++++{{total}} -->{{total}}+++++{{taxTotal}}
  <el-button type="primary" @click="onSubmit">立即创建</el-button>
  <el-button>取消</el-button>
</div>
</template>

<script>
export default {
  name: "Lession3",
  data() {
    return {      
      form: {
        products: [{
          productName: "甲醇",
          productId: '0001',
          price: null,
          number: null,
          tax: 0.23,
          total: null,
          taxTotal: null
        },{
          productName: "甲醇",
          productId: '0001',
          price: null,
          number: null,
          tax: 0.23,
          total: null,
          taxTotal: null
        },]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form);
    }
  },
  computed: {
    total: {
      get(){
        for(var i=0;i<this.form.products.length;i++){
          this.total[i]=this.form.products[i].price * this.form.products[i].number
          return this.form.products[i].price * this.form.products[i].number
        }
        // this.total=this.form.products.price * this.form.products.number
        // return this.form.products.price * this.form.products.number
      },
      set(newValue){
        console.log(newValue);
        // this.$set(this.form.products, 'total', newValue)
        this.form.products.total=newValue
        for(var i=0;i<this.form.products.length;i++){
          this.form.products[i].total=newValue[i]
        }
      }
    },
    taxTotal:{
      get(){
        this.taxTotal=this.form.products.price * this.form.products.number / (1+this.form.products.tax)
        return this.form.products.price * this.form.products.number / (1+this.form.products.tax)
      },
      set(newValue){
        this.form.products.taxTotal=newValue
      }
    }
  }
}
</script>