Category: Vue Answers

Sometimes, we want to access child component’s data from parent with Vue.js.

In this article, we’ll look at how to access child component’s data from parent with Vue.js.

How to access child component’s data from parent with Vue.js?

To access child component’s data from parent with Vue.js, we can assign a ref to the child component.

And then we can access the child component data as a property of the ref.

For instance, we write

<template>
  <markdown ref="markdown"></markdown>
</template>

<script>
export default {
  //...
  methods: {
    process() {
      const markdowns = this.$refs.markdown.items;
    },
  },
  //...
};
</script>

to assign the markdown ref to the markdown component.

Then we access the items reactive property from the markdown component with

this.$refs.markdown.items

Conclusion

To access child component’s data from parent with Vue.js, we can assign a ref to the child component.

And then we can access the child component data as a property of the ref.

Sometimes, we want to pass event and argument to v-on in Vue.js.

In this article, we’ll look at how to pass event and argument to v-on in Vue.js.

How to pass event and argument to v-on in Vue.js?

To pass event and argument to v-on in Vue.js, we can call the event handler method with $event and whatever argument.

And then we can retrieve the arguments from the method parameters in the same order.

For instance, we write

<template>
  <input type="number" @input="addToCart($event, ticket.id)" />
</template>

<script>
export default {
  //...
  methods: {
    addToCart(event, id) {
      console.log(id);
    },
  },
  //...
};
</script>

to call addToCart with the $event object and the ticket.id property.

$event has the event object emitted with the input event.

In the addToCart method, we access $event from event and ticket.id from id.

Conclusion

To pass event and argument to v-on in Vue.js, we can call the event handler method with $event and whatever argument.

And then we can retrieve the arguments from the method parameters in the same order.

Sometimes, we want to generate the build of a Vue.js app.

In this article, we’ll look at how to generate the build of a Vue.js app.

How to generate the build of a Vue.js app?

To generate the build of a Vue.js app, we can run npm run build if our project is created with the Vue CLI.

Therefore, if we created our Vue project with

vue init webpack myproject

Then we can run

npm run build

to generate a build.

Then we can get the files and folders generated from the build from the /dist folder in the project folder.

Conclusion

To generate the build of a Vue.js app, we can run npm run build if our project is created with the Vue CLI.

Sometimes, we want to format a Vuetify data table date column.

In this article, we’ll look at how to format a Vuetify data table date column.

How to format a Vuetify data table date column?

To format a Vuetify data table date column, we can populate the slot with the column that we want to format.

For instance, we write

<template>
  <v-data-table :headers="headers" :items="logs">
    <template v-slot:item.createdOn="{ item }">
      <span>{{ new Date(item.createdOn).toLocaleString() }}</span>
    </template>
  </v-data-table>
</template>

to add a v-data-tablewith theitem.createdOn` slot populated with custom content.

In it, we format the item.createdOn value into a human readable date string with toLocaleString after converting it into a Date instance with the Date constructor.

Conclusion

To format a Vuetify data table date column, we can populate the slot with the column that we want to format.

Sometimes, we want to create global data with Vue.js 2.

In this article, we’ll look at how to create global data with Vue.js 2.

How to create global data with Vue.js 2?

To create global data with Vue.js 2, we can create a Vuex store.

For instance, we write

const store = new Vuex.Store({
  state: {
    userData: [],
  },
  mutations: {
    setUserData(state, data) {
      state.userData = data;
    },
  },
});

to create a Vuex store with the Vuex.Store constructor.

Then we can commit the setUserData mutation with

store.commit('setUserData', userData)

And we can get the userData state with

store.state.userData

Conclusion

To create global data with Vue.js 2, we can create a Vuex store.