Vue.js Interview Questions And Answers

Most targeted up-to-date Vue.Js interview questions and answers list

Table of Contents

1. How do you create a Vue.js component?
2. How do you pass data to a child component in Vue.js?
3. How do you handle events in Vue.js?
4. How do you conditionally render elements in Vue.js?
5. How do you perform two-way data binding in Vue.js?
6. How do you make an HTTP request in Vue.js?
7. How do you use computed properties in Vue.js?
8. How do you use Vue Router for navigation in Vue.js?
9. How do you watch for changes in data in Vue.js?
10. How do you use v-for to render a list of items in Vue.js?
11. How do you use mixins in Vue.js?

• Whats more?
• Contributing
• License

1. How do you create a Vue.js component?

Answer:

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

2. How do you pass data to a child component in Vue.js?

Answer:

<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Child!',
    };
  },
};
</script>

3. How do you handle events in Vue.js?

Answer:

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    handleClick() {
      console.log('Button clicked!');
    },
  },
};
</script>

4. How do you conditionally render elements in Vue.js?

Answer:

<template>
  <div>
    <p v-if="showMessage">Hello, World!</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      showMessage: true,
    };
  },
};
</script>

5. How do you perform two-way data binding in Vue.js?

Answer:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: '',
    };
  },
};
</script>

6. How do you make an HTTP request in Vue.js?

Answer:

// Using axios library
import axios from 'axios';

export default {
  name: 'MyComponent',
  mounted() {
    axios.get('https://api.example.com/data')
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  },
};

7. How do you use computed properties in Vue.js?

Answer:

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

8. How do you use Vue Router for navigation in Vue.js?

Answer:

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  routes,
});

new Vue({
  router,
}).$mount('#app');

9. How do you watch for changes in data in Vue.js?

Answer:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: '',
    };
  },
  watch: {
    message(newMessage) {
      console.log('New message:', newMessage);
    },
  },
};
</script>

10. How do you use v-for to render a list of items in Vue.js?

Answer:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

11. How do you use mixins in Vue.js?

Answer:

// mixin.js
export default {
  methods: {
    logMessage() {
      console.log('Mixin method');
    },
  },
}

// MyComponent.vue
<script>
import mixin from './mixin.js';

export default {
  name: 'MyComponent',
  mixins: [mixin],
  mounted() {
    this.logMessage(); // Accessing the mixin method
  },
};
</script>

What's more?

A comprehensive list of questions and answers

Contributing

We welcome contributions from our users to help make this resource as comprehensive and useful as possible. If you have been recently interviewed and encountered a question that is not currently covered on our website, feel free to suggest it as a new question. Your contributions will be added to our platform, and we will make sure to credit you for your contributions. We appreciate your help in making our platform a valuable tool for all job seekers.

License

MIT License