时间戳

首页 > 解决方案 > 如何在单选按钮中仅选择一个选项后发布两个属性的数据？

javascript - 如何在单选按钮中仅选择一个选项后发布两个属性的数据？

问题描述

我有单选按钮，您有两种付款方式 - 30 天和 60 天。选择一个选项后，我正在发出发布请求并将选择的值发送到数据库。我想要做的是，单击一个选项后，我想同时发送两个属性的值。

现在它只发送payment_term_days:60or的值payment_term_days:30。选择一个选项后我想拥有的东西是： payment_term_days:60和payment_term_pct: 1,5

我正在使用 vue.js。怎么可能，我可以在 v-model 中传递两个参数吗？

十分感谢。

HTML

<form class="radioForm" role="form">
  <input 
         v-model = "newContract.payment_term_days"
         type="radio"
         id="60" 
         name="payment" 
         value="60"
         >
  <label for="60">60 Days, 1,5 % Commission</label><br>

  <input 
         v-model = "newContract.payment_term_days"
         type="radio" 
         id="30" 
         name="payment" 
         value="30"
         >
  <label for="30">30 Days, 4,0 % Commission.</label><br>
</form>

Vue.js

new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data() {
    return {
      newContract: {
        payment_term_days: "",
        payment_term_pct: null
      }
    }
  },
  methods: {
    sendAGB(newContract) {
      let fd = new FormData();
      fd.append("payment_term_days", newContract.payment_term_days);
      fd.append("payment_term_pct", newContract.payment_term_pct);

      let req = new Request(agbPath, {
        body: fd,
        headers,
        method: "POST"           
      });  

      fetch(req) 
        .then((response) => response.json())
        .then((data) => {
        alert("You have agreed terms and conditions")
        this.newContract = {
          payment_term_days: "",
          payment_term_pct: 0,
        }
      })
        .catch((error) => console.log("error", error));
    },
  }
})

标签： javascriptformsvue.jsvuejs2vue-component

解决方案

您可以使用计算的。删除data变量payment_term_pct并使用：

data() {
  return {
    newContract: {
      payment_term_days: ""
    }
  }
},
computed: {
  payment_term_pct() {
    const daysToPct = {
      30: 4,
      60: 1.5
    }
    return daysToPct[this.newContract.payment_term_days];
  }
}

对数据的方法引用应该是：

fd.append("payment_term_days", this.newContract.payment_term_days);
fd.append("payment_term_pct", this.payment_term_pct);

推荐阅读