Category: Vue Answers

Sometimes, we want to pass down Vue component slots in a wrapper component.

In this article, we’ll look at how to pass down Vue component slots in a wrapper component.

How to Pass Down Vue Component Slots Inside Wrapper Component

To pass down slots in a wrapper component, we can loop through all the slots and pass them down to the child.

For instance, we can write:

<wrapper>
  <parent-table v-bind="$attrs" v-on="$listeners">

    <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>

    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>

  </parent-table>
</wrapper>

We get the slots with the $slots variable.

Then we use Object.keys to get names of the slots so that we can loop through all of them and pass the name down.

Likewise, we can loop through the scoped slots with the $scopedSlots variables.

We get the keys the same way and loop through them with v-for the same way.

With Vue 2.6, the v-slot= directive is introduced to let is pass the slots down.

For instance, we can write:

<wrapper>
  <parent-table v-bind="$attrs" v-on="$listeners">
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
  </parent-table>
</wrapper>

We loop through the slot with v-for .

We get the scoped slots with the $scopedSlots variable.

slot is the slot name again.

This time, we pass it to the v-slot directive as a modifier to pass down the named slot.

scope has the scope from the scoped slot.

We use v-bind to get the scope.

And we

Alternatively, we can use render function to pass down the slots.

For instance, we can write:

render(h) {
  const children = Object.keys(this.$slots)
    .map(slot => h('template', { slot }, this.$slots[slot]))

  return h('wrapper', [
    h('parent-table', {
      attrs: this.$attrs,
      on: this.$listeners,
      scopedSlots: this.$scopedSlots,
    }, children)
  ])
}

We get the slots with the this.$slots property.

We call Object.keys to get the slot names.

And we call map on it to map the slot names to the template components.

And we pass in the slots name and the scope down,.

Then we return a wrapper component with the parent-table component with the listeners, attributes, and scoped slots and children as the children.

Conclusion

To pass down slots in a wrapper component, we can loop through all the slots and pass them down to the child.

Sometimes, we want to pass multiple parameters to a Vuex mutation.

In this article, we’ll look at how to pass multiple parameters to a Vuex mutation.

Passing Multiple Parameters to a Mutation with Vuex

To pass multiple parameters to action with Vuex, we can pass in an object as the payload.

For instance, we can create our mutation by writing:

mutations: {
  setToken(state, { token, expiration }) {
    localStorage.setItem('token', token);
    localStorage.setItem('expiration', expiration);
  }
}

We have an object as the second parameter.

It has the token and expiration properties.

Then we can invoke the mutation by writing:

store.commit('setToken', {
  token,
  expiration,
});

We invoke the setToken mutation with the token and expiration properties in an object as the 2nd argument.

Conclusion

To pass multiple parameters to action with Vuex, we can pass in an object as the payload.

Sometimes, we want to fire an event when the v-model value changes with Vue and JavaScript.

In this article, we’ll look at how to fire an event when the v-model value changes with Vue and JavaScript

Fire an Event When the v-model Value Changes with Vue and JavaScript

We can listen to the change event to do something when the v-model value changes value.

For instance, we can write:

<template>
  <div id="app">
    <input
      type="radio"
      name="fruit"
      value="apple"
      v-model="fruit"
      @change="onChange"
    />
    apple
    <input
      type="radio"
      name="fruit"
      value="orange"
      v-model="fruit"
      @change="onChange"
    />
    orange
    <input
      type="radio"
      name="fruit"
      value="grape"
      v-model="fruit"
      @change="onChange"
    />
    grape
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fruit: "apple",
    };
  },
  methods: {
    onChange() {
      console.log(this.fruit);
    },
  },
};
</script>

We have 3 radio buttons bound to the fruit reactive property with v-model .

In each radio button, we have the @change directive set to the onChange method.

In onChange , we get the this.fruit value.

Now when we click on a radio button, the current this.fruit value should be logged.

It should be one of the value attribute value of each radio button.

Conclusion

We can listen to the change event to do something when the v-model value changes value.

Sometimes, we want to toggle classes on click with Vue.js with JavaScript.

In this article, we’ll look at how to toggle classes on click with Vue.js with JavaScript.

Toggle Classes on Click with Vue.js with JavaScript

We can toggle classes by passing an object into the :class prop.

For instance, we write:

<template>
  <div id="app">
    <button @click="setActive">toggle class</button>
    <p :class="{ active }">hello</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: false,
    };
  },
  methods: {
    setActive() {
      this.active = !this.active;
    },
  },
};
</script>

<style scoped>
.active {
  color: red;
}
</style>

We have the setActive function that toggles the this.active reactive property.

We set that as the value of the @click directive to run it when we click the button.

Then we have :class=”{ active }” to add the active class when active is true .

And we set any element the active class to have color red.

Therefore, when we click the toggle class button, we should see the red color on the text toggle on and off.

Conclusion

We can toggle classes by passing an object into the :class prop.

Sometimes, we want to render newline characters in our Vue.js app with JavaScript.

In this article, we’ll look at how to render newline characters in our Vue.js app with JavaScript.

Render Newline Characters in Vue.js with JavaScript

We can render newline characters in our Vue.js app with the pre tag.

For instance, we can write:

<template>
  <div id="app">
    <pre>{{ text }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: `You can see the newline after me!\nWoohoo!`,
    };
  },
};
</script>

We have the text reactive property set to a string with a newline character.

Then we interpolate the text in the pre tag to render it as-is.

Conclusion

We can render newline characters in our Vue.js app with the pre tag.