update DOM only after submit form vue.js

Question

I have a form with two checkboxes. each of them are related to an object to change its props 'is_active' on true or false. on click, DOM updates immediatly : if checked, object appears and if not, disappears. on submit, object is persisted in database.

<form @submit.prevent="submit()">
    <div v-for="(checker_website, index) in website.checkers" :key="index">
        <input type="checkbox" class="mr-2" :id="index" :true-value="1" :false-value="0" v-model="website.checkers[index].is_active">
        <label :for="index">{{checker_website.checker.name}}</label>
    </div>

    <div class="text-right mt-5">
         <button class="save flex font-semibold py-2 px-4 rounded">Enregistrer</button>
    </div>
</form>

submit() {
    axios.post('/app/store',{websites: this.websites})
},

also, I have a {{total}} prop which is updated after any change on checkbox. it is calculated this way :

computed: {
    total() {
        let total = 0;
        this.websites.forEach(website => {
            website.checkers.forEach(checker => {
                if (checker.is_active === 1 && checker.checker.status === 1) {
                    total += checker.checker.price
                }
            })
        })
        return total
    }
},

and displayed like this :

<span class="p-6">
    Total mensuel : {{total}}€/HT
    </span>

what I want is to update DOM right after the submit and I find no way to do that. any help will be very appreciated !

Answer 1

One solution is to convert the total computed prop into a data property that gets updated on submit:

export default {
  data() {
    return {
      total: 0,
    }
  },
  computed: {
    // total() {?} // now a data property
  },
  methods: {
    submit() {
      this.total = this.getTotal()
    },
    getTotal() {
      let total = 0
      this.websites.forEach(website => {
        website.checkers.forEach(checker => {
          if (checker.is_active === 1 && checker.checker.status === 1) {
            total += checker.checker.price
          }
        })
      })
      return total
    },
  },
}

demo