Creating an edit form with Vue + Axios - Adding a dynamic value from database to the form input

Question

I am trying to do an edit form with Vue + Axios but I have a conflict... My Vue code:

<script>
  import {
    required,
    minLength
  } from 'vuelidate/lib/validators'

export default {
  created() {
    this.getPost();
  },
  data: function () {
    return {
      form: {
        name: ""
      }
    }
  },
  methods: {
    getPost() {
      axios.get('/api/bank/' + this.$route.params.id + '/edit')
        .then(response => {
          this.post = response.data.data;
        });
    },
    onSubmit() {
      if (this.formValid) {
        axios.put('/api/bank/update/' + this.$route.params.id, {
            name: this.$v.form.name.$model
          })
          .then(function (response) {
            console.log('enviado' + this.form.name);
          })
          .catch(function (error) {
            console.log(error);
          });

        this.$refs.editBank.reset(); // This will clear that form

        this.$awn.success("El registro ha sido actualizado", {
          labels: {
            success: "Éxito"
          }
        });

        this.$router.push('/bank');
      }
    }
  },
  computed: {
    formValid() {
      return !this.$v.$invalid;
    }
  },
  validations: {
    form: {
      name: {
        required,
        minLength: minLength(2)
      }
    }
  }
}
</script>

How you can see I am getting the data from database in the function getPost() but I want to put that value in the form, I mean when I go to this page in the input automaticly displays the value so I have my input like this:

<input type="text" class="form-control" id="exampleInputEmail1" 
                            v-model="$v.form.name.$model"
                            :class="{
                                'is-valid':!$v.form.name.$error && $v.form.name.$dirty,
                                'is-invalid':$v.form.name.$error && $v.form.name.$dirty
                            }"
                            placeholder="Ingresa el nombre del banco"
                            :value="post.bank"
                            >

how you can see I use :value="post.bank" to add the value but when I do that it displays an error:

Errors compiling template:

:value="post.bank" conflicts with v-model on the same element because the latt er already expands to a value binding internally 22 | 'is-invalid':$v.form.name.$error && $v.f orm.name.$dirty 23 | }" 24 | placeholder="Ingresa el nombre del banco" | 25 | :value="post.bank" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 26 |

So I wonder what it's the problem? It's says that :value is two times but it is not two times..

How can I fix it?

Because if I remove the :value so how can I add a dynamic value?

Thanks

Answer 1

Remove the :value as v-model already takes care of two-way binding between the data attribute and view.

Change your v-model to v-model="form.name"

Change your getPost method to the following:

getPost() {
      axios.get('/api/bank/' + this.$route.params.id + '/edit')
        .then(response => {
          this.post = response.data.data;
          this.$set(this.form, 'name', response.data.data.name)
        });
    },