无论如何为“输入”设置与 vue 变量不同的值？答案

【问题标题】：Is there anyway to set a different value for the "input" than the vue variable?无论如何为“输入”设置与 vue 变量不同的值？
【发布时间】：2019-06-18 01:43:36
【问题描述】：

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

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

     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，则该值必须再次进入数据库，我的目标只是将输入的值更改为更加用户友好。

【问题讨论】：

你想用set()函数做什么？？
例如，如果这是纯 js，我会做 [ if(myvalue

标签： vue.js

【解决方案1】：

简单定义计算属性的getter和setter：

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

【讨论】：