Computed Setter как валидатор

Я пытаюсь использовать вычисленное свойство для отслеживания значения в компоненте 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: ""
    }
}

Как лучше всего добиться желаемого поведения?


validation vue.js computed-properties element-ui
person rafafan2010    schedule 21.03.2018    source источник
comment
Это прекрасно! Закрытие как основанное на мнении. Но есть ненужное использование this.temp="";   -  person Bhojendra Rauniyar    schedule 21.03.2018
comment
Дело в том, что значение ввода вообще не проверяется. Я все еще могу ввести любое количество символов без ограничения ввода   -  person rafafan2010    schedule 21.03.2018
comment
о, тогда это не проблема сеттера. вы должны проверять через событие ввода.   -  person Bhojendra Rauniyar    schedule 21.03.2018
comment
Подтвердите в setter, а не в getter. Получатель должен всегда возвращать только значение, а не логику против значения.   -  person Ohgodwhy    schedule 21.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Установщик работает, но 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>

person Roy J    schedule 21.03.2018