How to pass a parameter to Vue @click event handler
Just use a normal Javascript expression, no {} or anything necessary: @click=”addToCount(item.contactID)” if you also need the event object: @click=”addToCount(item.contactID, $event)”
vue.js
Do we have router.reload in vue-router?
this.$router.go() does exactly this; if no arguments are specified, the router navigates to current location, refreshing the page. note: current implementation of router and its history components don’t mark the param as optional, but IMVHO it’s either a bug or an omission on Evan You’s part, since the spec explicitly allows it. I’ve filed an … Read more
In Vue JS, call a filter from a method inside the vue instance
this.$options.filters.capitalize(this.word); See http://vuejs.org/api/#vm-options
VueJs 2.0 emit event from grand child to his grand parent component
Vue 2.4 introduced a way to easily pass events up the hierarchy using vm.$listeners From https://v2.vuejs.org/v2/api/#vm-listeners : Contains parent-scope v-on event listeners (without .native modifiers). This can be passed down to an inner component via v-on=”$listeners” – useful when creating transparent wrapper components. See the snippet below using v-on=”$listeners” in the grand-child component in the … Read more
Only show slot if it has content
It should be available at this.$slots.footer So, this should work. hasFooterSlot() { return !!this.$slots.footer; } Example.
How do I use /deep/ or >>> or ::v-deep in Vue.js?
Vue 2 The following also works in Vue 3 but is deprecated. Sass: Use ::v-deep ::v-deep .child-class { background-color: #000; } Not using Sass: Use >>> >>> .child-class { background-color: #000; } With either syntax, the <style> tag for this component must be scoped: <style scoped> Vue 3 (and Vue 2.7) In Vue 3, the … Read more
How to comment code in a vue.js file?
You’d want to use standard HTML comments in the <template> tag in your situation. They’ll be stripped from the output as well which is nice. <!– Comment –>
Vue.js img src concatenate variable and text
You can’t use curlies (moustache tags) in attributes. Use the following to concat data: <img v-bind:src=”https://stackoverflow.com/questions/40255291/imgPreUrl +”https://stackoverflow.com/questions/40255291/img/logo.png””> Or the short version: <img :src=”https://stackoverflow.com/questions/40255291/imgPreUrl +”https://stackoverflow.com/questions/40255291/img/logo.png””> Read more on dynamic attributes in the Vue docs.
How to mock window.location.href with Jest + Vuejs?
You can try: global.window = Object.create(window); const url = “http://dummy.com”; Object.defineProperty(window, ‘location’, { value: { href: url } }); expect(window.location.href).toEqual(url); Have a look at the Jest Issue for that problem: Jest Issue
How to access to a child method from the parent in vue.js
You can use ref. import ChildForm from ‘./components/ChildForm’ new Vue({ el: ‘#app’, data: { item: {} }, template: ` <div> <ChildForm :item=”item” ref=”form” /> <button type=”submit” @click.prevent=”submit”>Post</button> </div> `, methods: { submit() { this.$refs.form.submit() } }, components: { ChildForm }, }) If you dislike tight coupling, you can use Event Bus as shown by @Yosvel … Read more