vue.js

How to get current name of route in Vue?

by

You are using computed incorrectly. You should return the property in the function. See the docs for more information. Here is your adapted example: computed: { currentRouteName() { return this.$route.name; } } You can then use it like this: <div>{{ currentRouteName }}</div> You can also use it directly in the template without using a computed … Read more

Using $refs in a computed property

by

Going to answer my own question here, I couldn’t find a satisfactory answer anywhere else. Sometimes you just need access to a dom element to make some calculations. Hopefully this is helpful to others. I had to trick Vue to update the computed property once the component was mounted. Vue.component(‘my-component’, { data(){ return { isMounted: … Read more

v-model and child components?

by

As stated in the documentation, v-model is syntactic sugar for: <input v-bind:value=”something” v-on:input=”something = $event.target.value”> To implement the v-model directive for a custom component: specify a value prop for the component make a computed property with a computed setter for the inner value (since you should not modify the value of a prop from within … Read more

Vue.js – Making helper functions globally available to single-file components

by

inside any component without having to first import them and then prepend this to the function name What you described is mixin. Vue.mixin({ methods: { capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1); } }) This is a global mixin. with this ALL your components will have a capitalizeFirstLetter method, so you can call this.capitalizeFirstLetter(…) from component … Read more