vue.js

Setting a checkbox as checked if method returns true


I am new to Vu Js.

I want to set my input checkbox to checked if the method returns true.

This is the element:

<input type="checkbox" id="checkbox" v-model="checked" />

my Method:

Vue.createApp({
  data() {
    return {
   
      checked:false
    };
  },
  computed: {
    computedClass() {
      return { checked: this.addGoals };
    }
  },
  methods: {
   
    addGoals() {
      this.checked = true;
    }
  }
}).mount('#app');

Edit: the addGoals method will do a conditional test to determine whether the value should be checked or not


Solution

  • Why computed here? What do you think would happen in checked: this.addGoals without calling the method?
    You write "if the method returns true", but your method addGoals() { this.checked = true; } always returns undefined...

    I'll give you an example where the method returns true and sets checkbox[checked]:

    Vue.createApp({
      data() {
        return {
          checked: false,
        };
      },
      created() {
        this.checked = this.addGoals();
      },
      methods: {
        addGoals() {
          return true;
        }
      }
    }).mount('#app');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
    <div id="app">
      <input type="checkbox" v-model="checked">
      <button @click="checked = addGoals()">addGoals()</button>
      <button @click="checked = false">remove checked</button>
    </div>