1

我正在尝试使用计算属性来监视ElementUI的el-input组件中的值，但我想要的值没有显示在组件中。具体来说，当用户键入输入时，我想将长度限制为三个字符，而不让输入显示更多。例如，我不希望用户键入 5 个字符的行为，然后当el-input不在焦点时，值得到更正。我意识到有一个maxlength属性，但我想让验证更通用。作为对此的扩展，我希望能够在内容上调用任何类型的函数el-input并显示该函数的结果。这就是我现在正在做的事情：

模板：

    <el-input
        :placeholder="placeholder"
        :value="inputValue"
        @keypress.enter.native="$emit('keypress-enter',event)"
        @input="input"
        :disabled="disabled"
        :autosize="true"
        :readonly="readonly"
        :type="inputType"
        :rows="rows"
        v-model="inputValue"
        > 
    </el-input>

脚本：

computed: {
    inputValue: {
        get: function(){
            return this.temp;
            // This is what I eventually want to do
            // return this.validationFunction.f(this.temp);
        },
        set: function(newVal) {
            // This is what I'm doing right now to test
            this.temp = "";
            this.temp = (newVal.length > 3) ? newVal.slice(0,3) : newVal;
        }
    },
},
data: {
    return {
        temp: ""
    }
}

获得所需行为的最佳方法是什么？

4

1 回答 1

0

二传手正在工作，但el-input不知道。问题是当值inputValue停止变化时，Vue 认为它不需要通知任何人。

因此，您必须更改值，然后$nextTick将其更改为您想要的值。这样通知总是发生。不幸的是，我无法简单地告诉 Vue 发送有关计算项或数据项的通知。

new Vue({
  el: '#app',
  data: {
    temp: 'a'
  },
  computed: {
    inputValue: {
      get() {
        return this.temp;
      },
      set(newValue) {
        this.temp = newValue;
        this.$nextTick(() => {
          this.temp = newValue.substr(0, 3);
        });
      }
    }
  }
});
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <el-input v-model="inputValue"></el-input>
  Actual value: {{ temp }}
</div>

于 2018-03-21T17:25:10.683 回答