Dynamic List Application as first Vue.js App Task Description:


Create a div-element and take control over it using a Vue-Instance.
Print an array of hobbies into the div-element. Provide some default hobbies.
Add a 'New Hobby' button and a text-input element. So that the user can add additional hobbies.
When a hobby list-item is clicked, it shall be removed from the list.
Add a "Hobby deleted"-paragraph which is only shown when a hobby-item has been deleted at least one time.
Above the list of hobbies add a hobby-counter which shows the current count of hobby-items.
Style the hobby-list depending on whether you have more or less then 3 hobbies in the list.
Outsource  your hobbies (the list-item elements) into a component (so that it becomes re-usable).


Here's my solution for the points 1 to 7:



new Vue({
  el: '#app',
  data: {
    hobbies: [{
        name: 'Running'
      },
      {
        name: 'Chess'
      },
      {
        name: 'Cooking'
      },
      {
        name: 'Hiking'
      }
    ],
    newHobby: '',
    deleted: false
  },
  methods: {
    addHobby: function() {
      this.hobbies.push({
        name: this.newHobby
      });
    },
    removeHobby: function(event) {
      let updatedHobbies = this.hobbies.filter((hobby) =&gt; {
        return hobby.name !== event.target.textContent.trim();
      });

      this.hobbies = updatedHobbies;

      if (!this.deleted) {
        this.deleted = true;
      }
    },
    setStyle: function() {
      if (this.hobbies.length &lt; 3) {
        return 'pink';
      } else if (this.hobbies.length === 3) {
        return 'orange';
      } else {
        return 'cyan';
      }
    }
  }
});
#app {
  max-width: 800px;
  margin: 0 auto;
}

li {
  margin: 10px;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
  &lt;div id="hobby-counter"&gt;
    &lt;p&gt;Hobbies: {{ hobbies.length }}&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="add-control"&gt;
    &lt;input type="text" id="newHobby" v-model="newHobby" /&gt;
    &lt;button v-on:click="addHobby" id="addNewHobby"&gt;Add New Hobby&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="deleted-message"&gt;
    &lt;p v-if="deleted"&gt;Hobby deleted!&lt;/p&gt;
  &lt;/div&gt;

  &lt;li v-for="hobby in hobbies" v-on:click="removeHobby" v-bind:style="{ backgroundColor: setStyle() }"&gt;
    {{ hobby.name }}
  &lt;/li&gt;
&lt;/div&gt;




Is everything done in a good way and manner?

Where could my implementation been improved?

Any ideas how to solve point 8?

There I get finally stucked.

Looking forward to read your comments and answers.
At the moment all your current hobbies only consists of a name. I think you could use a simple string instead of wrapping it in an object (for point 8 this is not possible though, of course).
No need to check if (!this.deleted) before setting this.deleted = true;
setStyle should be a computed property
You can use @click instead of v-on:click, you can also use :style instead of v-bind:style (just syntactic sugar)
I would put the v-if="deleted" on the &lt;div id="deleted-message"&gt; instead of the inner &lt;p&gt; element.