Vue.js VueJS-如何将隐藏输入添加到表单？

我创建了一个Vue组件，它有几个表单可以由用户提交。提交时，表单将向我的后端发送一些数据。问题是，我的后端需要知道提交了哪种表单，而此输入不依赖于用户，因此我添加了一个隐藏输入，以便用户发送数据时，我的后端也可以知道提交了哪种类型的表单。我尝试了以下方法：

<template>
  <div>
      
      <div v-if="order=='total'">

        <form @submit="formSubmit">

        <input type="hidden" v-model="order_type" value="form1">

        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>

        <button class="btn btn-primary">BUY</button>

        </form>

      </div>

      <div v-else-if="order=='partial'">

        <input type="hidden" v-model="order_type" value="form2">

        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>

        <button class="btn btn-primary">BUY</button>

        </form>

      </div>

      <br>

  </div>

</template>
     
<script>

import axios from 'axios'

    export default {

      props:{

        order:{
          type:String, 
          default:'total'
        },

      },

      mounted() {
          console.log('Component mounted.')
      },

      data() {
          return {
            name: '',
            description: '',
            output: ''
          };
      },
      methods: {
          formSubmit(e) {
              e.preventDefault();
              let currentObj = this;
              axios.post('MYURL', {
                  order_type: this.order_type,
                  price: this.price,
                  amount: this.amount
              })
              .then(function (response) {
                  currentObj.output = response.data;
              })
              .catch(function (error) {
                  currentObj.output = error;
              });
          }
      }
    }

</script>

购买




购买


从“axios”导入axios
导出默认值{
道具：{
订单：{
类型：字符串，
默认值：“总计”
},
},
安装的（）{
console.log（'组件已安装'）
},
数据（）{
返回{
名称：“”，
说明：“”，
输出：“”
};
},
方法：{
表格提交（e）{
e、 预防默认值（）；
让currentObj=这个；
axios.post（'MYURL'{
订单类型：this.order\u类型，
价格：这个价格，
金额：这个
})
.然后（功能（响应）{
currentObj.output=response.data；
})
.catch（函数（错误）{
currentObj.output=错误；
});
}
}
}

---

此代码的问题是，

订单类型

不能与表单一起发送。我在某个地方读到Vue不允许隐藏值，那么还有其他方法可以做到这一点吗？

您可以向该方法传递一个参数：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>

在方法中：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>

您的模板变成：

<template>
  <div>
      <div v-if="order=='total'">
        <form @submit.prevent="formSubmit("form1")">
        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>
        <button class="btn btn-primary" type="submit">BUY</button>
        </form>
      </div>
      <div v-else-if="order=='partial'">
        <form @submit.prevent="formSubmit("form2")">
        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>
        <button class="btn btn-primary" type="submit">BUY</button>
        </form>
      </div>
      <br>
  </div>
</template>

有了它，您可以通过删除条件而不需要向方法传递任何内容来简化模板：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>

---

您可以将参数传递给方法：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>

在方法中：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>

您的模板变成：

<template>
  <div>
      <div v-if="order=='total'">
        <form @submit.prevent="formSubmit("form1")">
        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>
        <button class="btn btn-primary" type="submit">BUY</button>
        </form>
      </div>
      <div v-else-if="order=='partial'">
        <form @submit.prevent="formSubmit("form2")">
        <input type="text" class="form-control" v-model="amount">
        <br>
        <input type="text" class="form-control" v-model="price">
        <br>
        <button class="btn btn-primary" type="submit">BUY</button>
        </form>
      </div>
      <br>
  </div>
</template>

有了它，您可以通过删除条件而不需要向方法传递任何内容来简化模板：

@submit.prevent="formSubmit("form1")"

formSubmit(value) {
  let currentObj = this;
  axios
    .post("MYURL", {
      price: this.price,
      amount: this.amount,
      order_type: value
    })
    .then(function(response) {
      currentObj.output = response.data;
    })
    .catch(function(error) {
      currentObj.output = error;
    });
},

<template>
  <div>
    <form @submit.prevent="formSubmit()">
      <input type="text" class="form-control" v-model="amount" />
      <br />
      <input type="text" class="form-control" v-model="price" />
      <br />
      <button class="btn btn-primary" type="submit">BUY</button>
    </form>
  </div>
</template>