Question

我需要根据此变量paragraph.RCBulletinNumber的从db返回的值来更改输入的显示：

我已经尝试过计算方法，但是我认为这不是我所需要的

     computed: {

    formatRCBulletinNumber: {

        set (val){
            return this.paragraph.RCBulletinNumber;
        }

    }

},

这是我使用v-model ='paragraph.RCBulletinNumber'的输入声明：

    <div class="form-group">
        <div v-if='typeof paragraph != undefined /*/<!--&& parseInt(paragraph.RCBulletinNumber)>0 -->/*/'>
            <input type="text" style="width: 40%;" class='form-control' id="RCNumber" placeholder="RC Number" v-model='paragraph.RCBulletinNumber'>
                </div>
                    </div>

我期望的是，如果paragraph.RCBulletinNumber的值小于或等于0，则输入保持为空。现在，如果变量等于0，则输入为0

但是如果paragraph.RCBulletinNumber等于0，则该值必须再次输入数据库，我的目标是将输入的值更改为更加用户友好。

Answer 1

只需定义计算属性的获取器和设置器：

computed: {
  formatRCBulletinNumber: {
    // getter
    get: function () {
      return this.paragraph.RCBulletinNumber || '';
    },
    // setter
    set: function (newValue) {
      this.paragraph.RCBulletinNumber = newValue;
    }
  }
}

然后在输入中引用计算出的属性：

<input type="text" style="width: 40%;" class='form-control' id="RCNumber" placeholder="RC Number" v-model='formatRCBulletinNumber'>

参考：https://vuejs.org/v2/guide/computed.html#Computed-Setter

无论如何，是否要为“输入”设置与vue变量不同的值？

1 个答案: