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

Question

У меня есть вход, который должен использовать модель, в зависимости от значения модели.

Это в основном то, что мне нужно:

<input v-if"modelOne == ''" v-model="modelOne">
<input v-else               v-model="modelTwo">

За исключением того, что при вводе ввода, modelOne больше не является пустой строкой, поэтому v-model меняется на modelTwo.

Как я могу сделать так, чтобы он проверял только значение modelOne при загрузке ввода, а не проверял иначе?

Примечание: это упрощенная версия динамического спискавходов.Каждый вход будет использовать свою модель, row.modelOne / row.modelTwo, и список входов изменится.

Answer 1

Вы должны использовать свойство watch, чтобы иметь старое и новое значение, и добавить логический элемент в свой объект данных следующим образом:

    data(){
         return{ 
            isModelOne:false,
            modelOne:'',
         }
      }

свойство наблюдения:

      watch:{
            modelOne(newval,oldval){
                 oldval==''?this.isModelOne=true:this.isModelOne=false;  
                }
           }

template:

     <input v-if="isModelOne" v-model="modelOne">
     <input v-else               v-model="modelTwo">

Другим подходом, который может быть полезен, является использование модификатора .lazy, который обновит связанный элемент после размывания ввода:

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      modelOne: '',
      modelTwo: 'model two'
    }
  }
});

.two{
border-radius:20px;
border:2px solid #ff55aa!important;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <input v-if= "modelOne == ''" v-model.lazy="modelOne" class="form-control"/>
  
  <input v-else v-model="modelTwo" class="form-control two" />
  <input value="three" class="form-control"/>
</div>