vue.js - Vue.js 发布复选框空数据或完整数据

Question

我正在尝试用vue js制作一个复选框，以便不编写该方法。我首先希望复选框为假，下一步是在发布复选框时，我希望将“opening_balance”作为空数组发送。反之亦然，如果选中该复选框，我希望它在发布数据时出现在“opening_balance”中。

例如：POST 无复选框

opening_balance: {}

过帐检查

opening_balance: {date: "2021-08-30", net_total: "1000.00", currency: "USD"}

new Vue({
    el: '#app',
    data() {
        return {
            attributes: {
                opening_balance: {
                    net_total: 0,
                    date: new Date(),
                    currency: USD,
                },
            }
        }
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>

<div id="app" style="padding: 1rem;">
<div class="d-flex">
    <input class="form-check-input" type="checkbox" value="false" @click="attributes.opening_balance" v-model="attributes.opening_balance">
    <label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="attributes.opening_balance">
    <input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
    <input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
    <input type="text" class="form-control" v-model="attributes.opening_balance.currency">
</div>
</div>

标签： vue.jscheckbox

Answer 1

如果我理解正确，请看下面的片段：

const app = new Vue({
  el: '#app',
  data() {
    return {
      attributes: {
        opening_balance: {
          
        },
      }
    }
  },
  methods: {
    setBalance(e) {
      if(!e.target.checked) {
        this.attributes.opening_balance= {}
      } 
    }
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" style="padding: 1rem;">
<div class="d-flex">
    <input class="form-check-input" type="checkbox" @click="setBalance">
    <label class="form-check-label"><b> opening balance</b></label>
</div>
<div v-if="attributes.opening_balance">
    <input type="text" id="Detaylari" class="form-control" v-model="attributes.opening_balance.date">
    <input type="text" class="form-control" v-model="attributes.opening_balance.net_total">
    <input type="text" class="form-control" v-model="attributes.opening_balance.currency">
    
    <p>{{ attributes.opening_balance }}</p>
</div>
</div>