如果 Vue.js 已填充，则不覆盖输入字段

Question

在我们的代码中，我们传入一个参数，如果参数存在，Vue.js 在输入字段中使用该参数，到目前为止还不错；

<input type="text" placeholder="First name" :value="customers_firstname ? customers_firstname : ''">

但是，如果用户出错（未填写邮政编码等）并且重新加载此页面，他们对此字段所做的任何更改都将被遗忘。它默认恢复为 customers_firstname，即使他们将其编辑为他们母亲的名字或他们将其发送给谁。

我怎样才能使这个有条件，以便 Vue 仅在没有值的情况下填充该值？

Answer 1

使用计算

computed: {
      CustomerFillName() {
      if (this.customers_firstname != null || this.customers_firstname !== '') return this.customers_firstname
      return ''
    },
}
<input type="text" placeholder="First name" :value="CustomerFillName">

Answer 2

根据 Lawrence 的评论，我能够使用 v-model 部分解决此问题；

<input type="text" placeholder="First name" v-model="CustomerFirstNameAddressFunction">

然而，导致重置的重要因素是弹出窗口的亲子关系 - 因此为了使其完全持久，我必须访问根变量；

computed: {
    CustomerFirstNameAddressFunction: {
        get: function() {
            return this.$root.customers_firstname_address;
        },
        set: function (value) {
            this.$root.customers_firstname_address = value;
        }
    }
}

（可以向 getter 添加额外的逻辑，但最简单的方法是用 '' 实例化 var，这就是它丢失条件位的原因。）

如果 Vue.js 已填充，则不覆盖输入字段

Make Vue.js not overwrite input field if it's filled

html

twig

vue.js

vue-component