Могу ли я выполнить метод, когда поле ввода достигает определенной длины?

Question

У меня есть поле ввода, которое принимает строку.Могу ли я выполнить метод (в vue.js), когда длина строки достигает определенного числа?

что-то вроде

<input v-if="inputBox.length == 6 THEN runme()"...>

Answer 1

Вы можете использовать наблюдателя для запуска метода, когда строка превышает длину:

new Vue({
  data () {
    return {
      model: ''
    }
  },
  watch: {
    model: {
      handler: function (value) {
        if (value.length >= 6) {
          this.trigger()
        }
      }
    }
  },
  el: '#app',
  methods: {
    trigger () {
      alert('hi there')
    }
  },
  template: `<input v-model="model">` 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

Вы можете использовать опцию наблюдения, вы сможете реагировать на изменения данных:

new Vue({
  el: '#root',
  data: {
    message: '',
    inputLength : undefined
  },
  methods : {
    doSomething(){
      console.log('I did it !')
    }
  },
  watch :{
    message : function(val) {
      if(val.length>=5){
      this.inputLength = val.length
      this.doSomething(); 
      }
    }
  }
})

.container {
  padding-top: 2em;
}

.intro {
  font-size: 1.5em;
  margin-bottom: 1.5em;
}

.input-value {
  margin-top: 1em;
  font-size: 1.25em;
}

.highlight {
  color: #00d1b2;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
  <h1 class="intro">Binding with Vue</h1>
  <div id='root' class="box">
    <label class="label">Enter text here</label>
    <input class="input is-medium" type='text' id='input' v-model='message'>
    <p class="input-value">The value of the input is: <span class="highlight">{{ inputLength }}</span></p>
  </div>
</div>

В этом примере, если длина ввода>> 5, она изменит значение inputLenght в данных и выполнит метод.

Для получения дополнительной информации об этом см. https://vuejs.org/v2/guide/computed.html#Watchers