2

Tenho um formulário com alguns inputs que tem v-model e outros com v-bind:value recebendo um valor inicial pelo 'data'. Toda vez que digito algo em um campo com v-model ele reseta o valor dos campos com v-bind:value para o valor inicial.

O erro acontece apenas na versão 2.x do vuejs.

jsfiddle com um exemplo: https://jsfiddle.net/ypeacuth/

new Vue({
  el: '#app',
  data: {
    nome: 'Ted',
    sobrenome: ''
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" id="nome" name="nome" v-model="nome">
  <input type="text" id="sobrenome" name="sobrenome" :value="sobrenome">
</div>

1
  • A explicação do @rnd_rss está correta... Quando você faz <input :value="sobrenome"> você está dizendo que a propriedade value vai ser sempre o que estiver dentro de data.sobrenome.. E como data.sobrenome é uma string vazia e nunca é modificado, o comportamento do Vue é tornar o value uma string vazia sempre que renderizar o componente. 6/08/2019 às 18:45

1 Resposta 1

1

Esse é mesmo o comportamento das diretivas, lembre que só o v-model tem two way data binding, ou seja se você alterar o input ou o valor que está no seu data o vue mantém eles 'sincronizados'. Já com o :value isso não acontece se você alterar o valor do input não vai alterar o valor no data pois ele tem one way data binding, nesse caso a reatividade acontece somente do data para o input. Então se entendi direito o que você precisa vai ser necessário alterar o :value para v-model.

new Vue({
  el: '#app',
  data: {
    nome: 'Ted',
    sobrenome: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" id="nome" name="nome" v-model="nome">
  <input type="text" id="sobrenome" name="sobrenome" v-model="sobrenome">
</div>

Fontes: https://v2.vuejs.org/v2/guide/forms.html#Value-Bindings

1
  • Você pode usar o :value para setar um valor inicial, porém por ele não vai ser possível atualizar o sobrenome(a variável que esta no data), se preencher alguma coisa no input do sobrenome o :value não atualiza o valor do input no sobrenome, é sempre e somente o sobrenome(que está no data) atualiza o input. Mas se você vai precisar setar um valor inicial e depois esse valor pode ser atualizado o jeito é mesmo usar o v-model
    – rnd_rss
    6/08/2019 às 18:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .