Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trying to create a edit in place style form in vue.js

This is my first attempt to create anything with vue.

Here's a quick JSFiddle demo

I'm trying to create a form that display the values without input, and then clicked, the input will display. I've managed to have a mockup "working", but I'm not very sure if this is the correct approach or not. I'm not very sure about:

Vue.nextTick(function() {
  document.getElementById(field.id).focus();
});

On the other hand, is there a recommended input validation library or something?

I would really appreciate any guidelines here :wink:

Thanks!

like image 758
Chux Avatar asked May 02 '17 11:05

Chux


People also ask

How do I add styles to Vuejs?

In Vue. js, we can add an inline style to our element by binding the style attribute in the HTML tag. For reference, :style is shorthand for v-bind:style . Inline styling can be done in two ways: using object syntax or array syntax.

What is @input in VUE JS?

It provides two-way data binding by binding the input text element and the value binded to a variable assigned.

What is the difference between v-model and V-bind?

In simple words v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.


1 Answers

Regarding you first question I don't think there is an issue with using plain javascript to focus on your input. You can also achieve this with vue refs See updated fiddle

This doesn't look cleaner but with refs you can put what you want as a ref and you are not limited by ids and in the end it's your choice what to use.

Regarding validation libraries here are a few:

  1. Vuelidate
  2. Vee Validate
  3. Other ones
like image 54
Cristi Jora Avatar answered Sep 17 '22 22:09

Cristi Jora