sunil-sandhu / vue-todo Goto Github PK

First of all, great Article Sunil!

Anyway, back to the point. I don't think it's a good idea to showcase such comparison of JS frameworks using statement like this:

let input = document.querySelector('input');

I dare to say, that one of the most powerful things that JS frameworks like Vue, React, Angular and others have brought to the developer's experience is 2-way data binding. Which is extremely useful but also extremely hard to get used to especially if you come from word of jQuery where querying values from DOM is your daily bread. It takes some time and practice to wrap one's mind around this. Especially for people who are new to the frameworks this might look like this is normal thing to do and might confuse them in the future.

My suggestion is to use v-model directive for vue and the equivalent counterpart for react.

I am not a React dev, so I don't know the exact syntax, but I can create PR for vue to update it if you want.

Lemme know what you thing.

Cheers!

It’ll be a bit more maintainable to use vues ref functionality for dealing directly with the input html element. Or better yet, bind it’s value to a data value and clear that.

hey, just read your medium article. very nice and simple comparison.

I thought I'd share some improvements you could make:

parent:

<ToDoItem v-for="(item, index) in list"
          :todo="item.todo"
          :key="index"
          :id="index"
          @delete="onDelete"
/>

methods: {
  ...
  onDelete(event) {
    this.list = this.list.filter(item => item.todo !== event);
  }
}

child:

export default {
    name: "to-do-item",
    props: [
        'id', 'todo'
    ],
    methods: {
        deleteItem(todo) {
            this.$emit('delete', todo)
        }
    }
}

this gives you a much cleaner approach to event handling in vue with child components.

some side notes:

also, you want to avoid things such as item.indexOf() inside html markup. a simple (item, index) of list can solve this and keep it a bit cleaner. or, the list should contain the key you want to reference.

[{ todo: 'a', id: 1 }]

also, i don't see any use for :id="index" inside the child component so you could afford to remove it from being passed to the child component.

props:

another small improvement is how you're handling the props inside the child component. you can force types using an object

export default {
    name: "to-do-item",
    props: {
      todo: {
        type: Object,
      },
    },
    ...
}

and even set a default if it's optional

export default {
    name: "to-do-item",
    props: {
      todo: {
        type: Object,
        default: () => {},
      },
    },
    ...
}

or even have multiple types:

export default {
    name: "to-do-item",
    props: {
      id: {
        type: [String, Number],
        default: () => null,
      },
    },
    ...
}

i moved from angular to vue and have never touched react, so keep up the awesome work!