传递复选框 true 或 false VueJS

Question

我的 VueJS 网站上有一个复选框，我想执行以下操作：如果该复选框special为 true，则在列中发送数据库值1，我该如何正确执行此操作？

我确实是这样的：

<label class="checkbox-control">
  <input type="checkbox" v-model="special"  v-on:change="special"  :disabled="channel.length === 0">

  <div class="checkbox-control__content"><i></i>Test</div>
</label>

data() {
    return {
      channel: "",
      special: false,
    }
    sendFunction() {
      this.$root.axios.post("/user/userPromo", {
        channel: this.channel,
        special: this.special
      }).then((res) => {
        const data = res.data;
        this.$root.showNotify(data.type, this.$t(`index.${data.message}`, {
          name: data.name
        }));
      });
    },

在后端，当我在表中添加数据时，我使用$special = $r->get('special');，但它不想工作。我什么时候犯错了？

Answer 1

您可以使用：true-value="1" false-value="false"

<input type="checkbox" v-model="toggle" true-value="1" false-value="false" />

// when checked:
vm.toggle === '1'
// when unchecked:
vm.toggle === 'false'

Vue2 和 Vue3 ：

https://v3.vuejs.org/guide/forms.html#checkbox-2

https://v2.vuejs.org/v2/guide/forms.html#Checkbox

this.special然后在里面使用methods sendFunction：

<input type="checkbox" v-model="toggle" true-value="1" false-value="false" />

// when checked:
vm.toggle === '1'
// when unchecked:
vm.toggle === 'false'

var app = new Vue({
  el: '#app',
  data: {
    special: false
  },
  methods: {
    sendFunction: function(event) {
    
      console.log(this.special)
      
      //this.$root.axios.post("/user/userPromo", {
        //channel: this.channel,
        //special: this.special
      //}).then((res) => {
        //const data = res.data;
        //this.$root.showNotify(data.type, this.$t(`index.${data.message}`, {
          //name: data.name
        //}));
      //});
    }  
  }
})

另外，如果this.special在 axios 内部不可用，则意味着this将绑定到 axios 函数，因此您需要之前保存数据并将其用作保存的变量：

 sendFunction: function(event) {
        const value = this.special      
          this.$root.axios.post("/user/userPromo", {
          //use value here