VueJS - 如何向表单添加隐藏输入？

Question

我创建了一个 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>

此代码的问题是 order_type 没有随表单一起发送。我在某处读到 Vue 不允许隐藏值，那么有没有其他方法可以做到这一点？

Answer 1

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

@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>
      <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>

解决方案 2 为避免重复，您还可以设置计算属性:

orderType(){
  if (this.order === "total") {
    return "form1"
  } else if (this.order === "partial") {
    return "form2"
  } else {
    return null
}

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

<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>

并且在该方法中 order_type 的值是在计算的属性:

中计算的

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

VueJS - 如何向表单添加隐藏输入？

VueJS - how can I add a hidden input to a form?

hidden-field

vue.js