Using v-if and v-else how to show valid message on toggle on/off in vuejs?

Question

toggleEnable(event) {
  let shouldEnable = event ? event.target.checked : false
  if (typeof event === 'boolean') {
    this.isEnabled = event;
  }
  if (shouldEnable !== this.autoCampaign.enabled) {
    this.updateSettings({
      enabled: shouldEnable
    })
  }
},

<div id="switch-wrapper">
  <span>enabled</span>
  <span class="switch">
  <input name="auto_campaign[enabled]" type="hidden" value="0">
  <input id="enabled" class="switch-input" type="checkbox" value="1"
  name="auto_campaign[enabled]" v-model="isEnabled"
  @change="toggleEnable" />
<label class="switch-paddle enable-button" for="enabled"></label>
</span>
</div>

Issue with the code is The status is displayed always as "enabled" even if the toggle is off. But i need to show a separate message as The status should be "disabled" when the toggle is on OFF position.

I saw that this can be achieved through v-if and v-else. but not sure how to proceed

Nitheesh · Accepted Answer · 2021-10-22 03:10:40Z

The v-if and v-else implementation will be as below.

Please note v-else should be added to the next of v-if or else v-else wont work.

You just need to depend on your v-model value isEnabled. This will automatically be updated when you change the checkbox. You dont need to update it seperately through toggleEnable function

new Vue({
    el: "#app",
    data: {
        isEnabled: false
    },
    methods: {
        toggleEnable(event) {
            // let shouldEnable = event ? event.target.checked : false
            // if (typeof event === 'boolean') {
            //     this.isEnabled = event;
            // }
            // if (shouldEnable !== this.autoCampaign.enabled) {
            //     this.updateSettings({
            //         enabled: shouldEnable
            //     })
            // }
        },
    }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
    <div id="switch-wrapper">
        <span v-if="isEnabled">enabled</span>
        <span v-else>disabled</span>
        <span class="switch">
            <input name="auto_campaign[enabled]" type="hidden" value="0">
            <input id="enabled" class="switch-input" type="checkbox" value="1" name="auto_campaign[enabled]"
                v-model="isEnabled" @change="toggleEnable" />
            <label class="switch-paddle enable-button" for="enabled"></label>
        </span>
    </div>
</div>

Collectives™ on Stack Overflow

Using v-if and v-else how to show valid message on toggle on/off in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related