Tommy001
6 months ago
956
7
Vue

Toggle class if at least one of the checkboxes are checked

Posted 6 months ago by Tommy001

I have a custom element called "modal", used like this in my html:

<div id="root" class="container">
  <modal v-if="showModal" @close="showModal=false">
    <template slot="header">Tips på kompletterande artiklar...</template>
  </modal>
</div>

This modal is made up of custom elements, created with Vue components. The modal component looks like this:

Vue.component('modal', {
  template: `
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          <slot name="header"></slot>
        </p>
        <button class="delete" aria-label="close" @click="$emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <div class="box">
           <artikel-lista></artikel-lista>
        </div>
      </section>
      <footer class="modal-card-foot">
        <slot name="footer">
          <button @click="submit" class="button" :class="{grey:toggleclass}">Lägg till</button>
          <button class="button" :class="{green:toggleclass}" @click="$emit('close')">Nej tack, fortsätt till varukorgen</button>
        </slot>
      </footer>
    </div>
  </div>
  `,
  data(){
    return{
      toggleclass: true
    }
  },
  methods:{
    submit(){
      Event.$emit('submit');
    },
  }
});

The custom element "artikel-lista" from the template above is made up of another Vue component, like this:

Vue.component('artikel-lista', {
  template:`
  <ul>
    <artikel v-model="toggle" v-for="artikel in artiklar" :key="artikel.sku">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" target="_blank" class="button tiny">Läs mer</a></artikel>
  </ul>
  `,

  data(){
    return{
      artiklar: App.artiklar,
      key:"",
      toggle:false
    }
  },

  created(){
    Event.$on('submit', () =>
    // coming soon

  );
},
});

And the custom element "artikel" from the template above is created with this Vue component:

Vue.component('artikel',{
  template: `<li style="list-style-type:none;"><input @input="toggle($event)" :checked="toggled" v-bind:value="toggle" type="checkbox" class="kryssruta"/><span></span><slot></slot></li>`,

  data(){
    return{
      toggled:this.value,
    }
  },
  methods: {
    toggle: function(value) {
      this.toggled = ! this.toggled;
      this.$emit('input', this.toggled);
    },
  },

  props: {
    value: {
      type: Boolean,
      default:false,
    },
  },
});

Now to my problem... the modal shows as it should, and the body area in the modal is filled with list elements with contained checkboxes, with the help of a v-for statement. All of this works, but I also want to toggle the button class "grey" in the modal template when at least one checkbox is checked (for now I have just set it to true). And I can't figure out how to do that...

I used the method described here: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components for using V-model on a component.

My solution above seems to work at first as I tick the boxes. But as soon I remove a tick in one of the boxes the variable "toggle" gets a false value in the custom component "artikel-lista". I need it to stay true as long as at least one box is ticked. But how...?

Did any of you understand what I am asking? Please let me know if I can clarify. The method "toggle" in the component "artikel" just above emits false if a box is unticked and true if it is ticked. Ths event is then used in the v-model in the component "artikel-lista".

Please sign in or create an account to participate in this conversation.