vue.js

Pass data from child to parent in Vuejs (is it so complicated?)

Props are for parent -> child You can use $emit for child -> parent v-on directive captures the child components events that is emitted by $emit Child component triggers clicked event : export default { methods: { onClickButton (event) { this.$emit(‘clicked’, ‘someValue’) } } } Parent component receive clicked event: <div> <child @clicked=”onClickChild”></child> </div> … … Read more

Delete a Vue child component

Yes, the child component cannot delete itself. The reason is because the original data for rows is held in the parent component. If the child component is allowed to delete itself, then there will be a mismatch between rows data on parent and the DOM view that got rendered. Here is a simple jsFiddle for … Read more

How to have list + details pages based on API fetched content

Since your API requires some CORS configuration, here is a simple solution with the JSONplaceholder API of a index + details list collection. test.vue, pretty much the blog listing in your case <template> <div> <div v-if=”$fetchState.pending”>Fetching data…</div> <div v-else> <div v-for=”item in items” :key=”item.id”> <nuxt-link :to=”`/details/${item.id}`”> View item #{{ item.id }}</nuxt-link> </div> </div> </div> </template> … Read more

Mocking methods on a Vue instance during TDD

Solution 1: jest.spyOn(Component.methods, ‘METHOD_NAME’) You could use jest.spyOn to mock the component method before mounting: import MyComponent from ‘@/components/MyComponent.vue’ describe(‘MyComponent’, () => { it(‘click does something’, async () => { const mockMethod = jest.spyOn(MyComponent.methods, ‘doSomething’) await shallowMount(MyComponent).find(‘button’).trigger(‘click’) expect(mockMethod).toHaveBeenCalled() }) }) Solution 2: Move methods into separate file that could be mocked The official recommendation is … Read more

Vue.js change {{ }} tags

With the latest version (2.0.5), the above doesn’t work. Rather than assigning to the global config, you pass the delimiters as an option to the Vue instance: new Vue({ el: ‘#app’, data: data, delimiters: [“<%”,”%>”] }); At least, that’s what I had to do to make it work.