使用 Vue + Axios 创建编辑表单 - 将数据库中的动态值添加到表单输入

Question

我正在尝试使用 Vue + Axios 进行编辑表单，但我遇到了冲突...我的 Vue 代码：

<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>

您如何看到我在函数 getPost() 中从数据库中获取数据，但我想将该值放入表单中，我的意思是当我进入此页面时，输入会自动显示该值，所以我有我的像这样输入：

<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"
                            >

您如何看到我使用 :value="post.bank" 来添加值，但是当我这样做时会显示错误：

编译模板时出错：

:value="post.bank" 在同一元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定 22 | 'is-invalid':$v.form.name.$error && $v.form.name.$dirty 23 | }" 24 | placeholder="Ingresa el nombre del banco" | 25 | :value="post.bank" | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 26 |

所以我想知道这是什么问题？据说 :value 是两倍，但不是两倍..

我该如何解决？

因为如果我删除 :value 那么如何添加动态值？

谢谢

Answer 1

删除:value，因为v-model 已经负责数据属性和视图之间的双向绑定。

将您的 v-model 更改为 v-model="form.name"

将您的 getPost 方法更改为以下内容：

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)
        });
    },