10

I would like to update some input fields

so I created an input element:

new Vue({
  el: '#app',
  data: {
    record: {
      email: 'example@email.com'
    },
    editing: {
      form: {}
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" :value="record.email" v-model="editing.form.email">
  <pre>{{ editing.form.email }}</pre>
</div>

In this input element I added :value attr and a v-model

Unfortunately I get an error:

conflicts with v-model on the same element because the latter already expands to a value binding internally

What is the best solution to fill the input field with data and then update it?

I also tried to add :name="..." instead of :value="..."

http://jsfiddle.net/to9xwL75/

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Greg Ostry
  • 1,161
  • 5
  • 27
  • 52

4 Answers4

7

Don't use :value with v-model together.

Use mounted() to update your model and pre-fill input value:

data() {
  return {
    record: {
      email: ''
    }
  }
},
mounted() {
  setTimeout(() => {
    this.record.email = 'example@email.com'
  }, 500)
}
Alexander Kim
  • 17,304
  • 23
  • 100
  • 157
4

You may want to put the initial/default value on the data object, and two-way binding should work with v-model. Just remove the editing.form.email and try this:

<div id="app">
  <input type="text" v-model="record.email">
  <pre>{{ record.email }}</pre>
</div>

new Vue({
  el: '#app',

  data() {
    return {
      record: {
        email: 'example@email.com'
      }
    }
  }
})

If you need to populate this field with dynamic values, you could add a handler method and update the input element as the data is fetched:

methods: {
    getData() {
        axios.get('/some-url')
            .then(data => {
                this.record.email = data.email;
            });
    }
}
Yom T.
  • 8,760
  • 2
  • 32
  • 49
  • 1
    I suppose he wants to set initial input value with a fetched data from API. You can't simply assign request's response in a data with your solution. – Alexander Kim Dec 12 '18 at 08:26
  • yes i'm fetching data with an API. When i click on a button "edit" i would like to set a v-if condition on a particular display element and change it to an input element with a prefilled data. But i think this was my logical mistake to make two objects editing.form and a record. – Greg Ostry Dec 12 '18 at 08:36
1

Like Alexander says, don't use :value and v-model together. This is because v-model creates a two-way binding. It combines :value and @change. Once you bind an input, you should forget about the input and focus on your model.

If 'example@email.com' is a placeholder, why don't you use the placeholder attribute?

bbsimonbb
  • 27,056
  • 15
  • 80
  • 110
-1

Hi,I solved this problem this way:

 <input
   placeholder="Name"
   class="block w-full bg-grey-lighter text-grey-600 border placeholder 
   gray-500 border-indigo-200 rounded-lg h-10 px-4 focus:ring focus:ring- 
   indigo-300 "
   type="text"
   v-model="form.name" 
/>


data:() => ({
   form:{
      name: "",
      note: "",
      selected: 0,
      gender: 0

   }
}),
porps: {
  contact: {
     type: Object
   }
},
whatch: {
   contact: {
      immediate: true,
      handler(val, oldVal) {
         this.form =  {
              name: val.name,
              note: val.note,
              selected: val.seleted,
              gender: val.gender
          }
      }
   }
}
Andrew Grimes
  • 1
  • 2
  • While this code may solve the problem, [including an explanation](//meta.stackexchange.com/q/114762) really helps to improve the quality of your answer. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations. Read [answer]. – padaleiana Aug 16 '21 at 15:46
  • How does this answer come with misspellings... – Anders Lindén Oct 11 '22 at 10:09