VueJS Practice by yourself

Here’s a short practice that you can try to get more familiar with Vue.js:

1. Create a new Vue.js project with a template that displays a list of names.
2. Add a form that allows the user to add new names to the list.
3. Use Vue’s reactive data-binding to dynamically update the list of names whenever a new name is added.
4. Add a button next to each name that allows the user to remove the name from the list.
5. Use Vue’s computed properties to display the number of names in the list.

Here’s some code to get you started:

phpCopy code<template>
  <div>
    <h1>Name List</h1>
    <form @submit.prevent="addName">
      <input type="text" v-model="newName">
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="name in names" :key="name">
        {{ name }}
        <button @click="removeName(name)">X</button>
      </li>
    </ul>
    <p>Total names: {{ totalNames }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ['John', 'Jane', 'Jim'],
      newName: ''
    };
  },
  methods: {
    addName() {
      this.names.push(this.newName);
      this.newName = '';
    },
    removeName(name) {
      this.names = this.names.filter(n => n !== name);
    }
  },
  computed: {
    totalNames() {
      return this.names.length;
    }
  }
};
</script>

This code creates a Vue component that displays a list of names, a form to add new names, and a computed property that displays the total number of names. The component also implements methods to add and remove names from the list, which are triggered by user interaction with the form and buttons.

Try adding and removing names and see how the component updates dynamically. You can also try adding more features, such as sorting the names in alphabetical order or adding a search bar to filter the names.