How to leave values already filled in the input (VUE Js)

Asked

Viewed 370 times

-1

I’m doing a simple CRUD, with Vue, Node, Mariadb. In the update part, I don’t know how to take the user values and leave already filled. (I’m beginner)

            <div>
              <p>Nome</p>
              <input type="input">
              <p>Data de nascimento</p>
              <input type="input">
              <p>Email</p>
              <input type="input">
              <h2 class = "endereco">Seu endereço</h2>
              <p>Rua</p>
              <input type="input"> 
              <p>Número</p>
              <input type="input">
              <p>Bairro</p>
              <input type="input">
              <button class="btnAdd" @click="addUser()">Atualizar</button>
             </div>

User data is in a table, each row has the edit button. How do I fill user fields in input?

html node.js vue.js

  • At a glance at the documentation it is very easy, https://vuejs.org/v2/guide/forms.html roughly you will fill in the value using the v-model

1 answer

1


To fill the value must use v-model for <form/> As follows create a template (model) and group their values, then in each input writes the field referring to the model and its respective key, as demonstrated below:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#editor',
  data: {
    model: {
      nome: 'nome',
      nascimento: '01/01/1999',
      email: '[email protected]',
      rua: 'rua',
      numero: '1',
      bairro: 'Bairro'
    }
  },
  methods: {
      addUser: function() {
        console.log('clicado');
      }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="editor">
<div>
    <p>Nome</p>
    <input type="text" v-model="model.nome">
    <p>Data de nascimento</p>
    <input type="text" v-model="model.nascimento">
    <p>Email</p>
    <input type="text" v-model="model.email">
    <h2 class = "endereco">Seu endereço</h2>
    <p>Rua</p>
    <input type="text" v-model="model.rua"> 
    <p>Número</p>
    <input type="text" v-model="model.numero">
    <p>Bairro</p>
    <input type="text" v-model="model.bairro">
    <button class="btnAdd" @click="addUser()">Atualizar</button>
   </div> 
</div>

Observing: found some errors in your html, check in the example the differences

Browser other questions tagged html node.js vue.js

You are not signed in. Login or sign up in order to post.