DEV Community

Making a Vue component: an Editable Navigation Element

Tori Pugh on March 01, 2018

I had an interesting idea to create a navigation that for simplicity I’ll call an editable navigation. I wanted this navigation to be easy to use. ...

Read full post

tsanak • Mar 3 '18

Good job!
You can also check v-model modifiers: vuejs.org/v2/guide/forms.html#trim

Trim for example can be used like this:
v-model.trim="editLink"
and you dont have to worry about untrimmed data in the editLinks function.

For rearranging the links you can check out:
github.com/SortableJS/Vue.Draggable
I have tried it and it was easy to use.

Tori Pugh • Mar 3 '18

Nice! I can't wait to try it out and cut down on some of my javascript.

I saw that github and was thinking of giving it a try. Wasn't sure to try and code on my own or use someone's package. Either way I'll look into it.

Maccabee • Mar 5 '18

This is great!

Just one comment about adding links on Enter. I've seen many people forget, especially in JS land, that there is a form element. You can add the function call as the submit handler and you have Enter by default.

codepen.io/maccabee/pen/yvWoLd

Tori Pugh • Mar 5 '18

Great point! I was working so hard on other examples that I'd seen and forgot I could use a form.

Is my example practical for a form or does it not matter? If this was a live project would I have to worry about sanitation and other things with submitting?

Maccabee • Mar 5 '18

Forms are a logical grouping of inputs. Yours is pretty practical use as it reduces manually event listening. For the modern JS frameworks, creating SPAs, they make less sense as you're mostly making AJAX requests anyway.

For non-SPA Applications, they're very useful as you can add action and method attributes and the default submitting behavior then sends it to the server.

For live projects, HTML5 has native validations for inputs, the-art-of-web.com/html/html5-form..., though I can't recall at the moment if they require the form tag.

Sanitation would need to be done manually though.

Pedro M. M. • Mar 4 '18 • Edited

I really love Vue. It's ridiculously faster than Angular and quite simpler than React but gosh, Vue —even on its latest version— is so tailored to ES5 that I always end up using React. I wish Evan would release a Vue 3 version based on ES6.

Tori Pugh • Mar 5 '18

Interesting, I didn't know its more tailored to ES5. I just use it because its what I'm used to so my mind goes to it automatically. I need to work on transitioning into ES6.

Pedro M. M. • Mar 5 '18 • Edited

Yeah. Due to how it works (writing pure javacript objects), it forces you to write code like the following:


var app = {
    data: {},
    methods: {
       addLink: function() {},
       removeLink: function() {}
    }
}

instead of sth like this:


class App {

    addLink() {
    }

    removeLink() {
    }

}

But well. Turns out it's really hard for Vue to fit with ES6 since it uses plain js objects by design, so I understand the Evan's decision and that's why I say that Vue is tailored to ES5.

I guess I just love ES6 because it's closer to other languages and it seems to me that ES6 is kind of cleaner than ES5.