Category: Vue

Categories
Vue Answers

How to pass parameters in computed properties in Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to pass parameters in computed properties in Vue.js.

In this article, we’ll look at how to pass parameters in computed properties in Vue.js.

How to pass parameters in computed properties in Vue.js?

To pass parameters in computed properties in Vue.js, we add a method.

For instance, we write

<template>
  <div>
    <span>{{ fullName("Hi") }}</span>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

to add the fullName method that takes the salut parameter and return a string combined with the firstName and lastName reactive properties.

Then we call fullname with 'Hi' to render the string returned by fullName.

Conclusion

To pass parameters in computed properties in Vue.js, we add a method.

Categories
Vue Answers

How to fix Vue v-on:click does not work on component?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix Vue v-on:click does not work on component.

In this article, we’ll look at how to fix Vue v-on:click does not work on component.

How to fix Vue v-on:click does not work on component?

To fix Vue v-on:click does not work on component, we add the native modifier.

For instance, we write

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

to add a native click handler to the root element of the test component by using the @click.native directive.

We set it to testFunction so when the root element of test is clicked, testFunction is called.

Conclusion

To fix Vue v-on:click does not work on component, we add the native modifier.

Categories
Uncategorized Vue Answers

How to watch store values from Vuex with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to watch store values from Vuex with Vue.js.

In this article, we’ll look at how to watch store values from Vuex with Vue.js.

How to watch store values from Vuex with Vue.js?

To watch store values from Vuex with Vue.js, we get the value from a getter.

For instance, we write

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["myState"]),
  },
  watch: {
    myState(val, oldVal) {
      console.log(val, oldVal);
    },
  },
};
</script>

to call mapGetters to map the myState getter to the myState computed property.

Then we add a watcher for myState and get the current value with val and the previous value with oldVal.

Conclusion

To watch store values from Vuex with Vue.js, we get the value from a getter.

Categories
Vue Answers

How to reverse the order of an array using v-for and orderBy filter in Vue.js?

Labrador retriever puppy walking on green grass

To reverse the order of an array using v-for and orderBy filter in Vue.js, we use the reverse method.

For instance, we write

<template>
  <ul>
    <li v-for="item in items.slice().reverse()">
      //do something with item ...
    </li>
  </ul>
</template>

to make a copy of the items array with slice.

And we call reverse to return a reversed version of the copied array.

We then use v-for to render the items in the reversed array.

Categories
Vue Answers

How to fix Vue js error: Component template should contain exactly one root element?

Labrador retriever puppy walking on green grass

To fix Vue js error: Component template should contain exactly one root element, we should wrap our elements with one root element in our template.

For instance, we write

<div>
  <div class="form-group">...</div>

  <div class="col-md-6">...</div>
</div>

to wrap a div around the other divs to clear the error.