Vue: v-модель не определена или по умолчанию / отступление

Question

Можно ли в любом случае установить значение по умолчанию для входа в значение другого поля ввода, если оно оставлено пустым.Похоже, я не могу указать это ни в данных, ни в атрибуте v-модели:

<template>
    <div>
        <input type="number" v-model="font1 || 14"> <!-- gives error -->
        <input type="number" v-model="font2 || font1"> <!-- gives error -->
        <input type="number" v-model="font3 || font1"> <!-- gives error -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            font1: 14,
            font2: this.font2 || this.font1, // this approach also gives error
            font3: this.font3 || this.font1 // this approach also gives error
        }
    }
}
</script>

Любая помощь приветствуется.Спасибо.

Answer 1

Вам нужно будет использовать комбинацию v-model и получателей и установщиков вычисленных свойств для достижения того, что вы хотите.

1. Объявите внутреннее хранилище данных для шрифтов, давайте назовемf1, f2 и f3.Задайте для f1 значение по умолчанию 14:

   data: function()  {
     return {
       f1: 14,
       f2: null,
       f3: null,
     };
   }
   

2. Теперь, когда компонент смонтирован, вы захотите соответствующим образом интерполировать значения.Это можно сделать с помощью обратного вызова vm.mounted():

   mounted: function() {
     // f2 takes the value of f1, if itself is falsy
     this.f2 = this.f2 || this.f1;
   
     // f3 takes the value of f2, if itself is falsy
     this.f3 = this.f3 || this.f2;
   }
   

3. Последний шаг заключается в настройке вычисляемых свойств так, чтобы каждый раз, когда font1, font2 или font3 изменения, они обновят хранилище данных внутреннего шрифта соответствующим образом:

   computed: {
     font1: {
       set: function(val) {
         if (val)
           this.f1 = val;
       },
       get: function() {
         return this.f1;
       }
     },
     font2: {
       set: function(val) {
         this.f2 = val || this.f1;
       },
       get: function() {
         return this.f2;
       }
     },
     font3: {
       set: function(val) {
         this.f3 = val || this.f2;
       },
       get: function() {
         return this.f3;
       }
     }
   }
   

См. подтверждение концепции ниже:

Vue.component('test', {
  template: '#test',
  data: function() {
    return {
      f1: 14,
      f2: null,
      f3: null,
    };
  },
  mounted: function() {
    this.f2 = this.f2 || this.f1;
    this.f3 = this.f3 || this.f2;
  },
  computed: {
    font1: {
      set: function(val) {
        if (val)
          this.f1 = val;
      },
      get: function() {
        return this.f1;
      }
    },
    font2: {
      set: function(val) {
        this.f2 = val || this.f1;
      },
      get: function() {
        return this.f2;
      }
    },
    font3: {
      set: function(val) {
        this.f3 = val || this.f2;
      },
      get: function() {
        return this.f3;
      }
    }
  }
});

new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test />
</div>
<script type="text/x-template" id="test">
    <div>
        <input type="number" v-model.number="font1">
        <input type="number" v-model.number="font2">
        <input type="number" v-model.number="font3">
    </div>
</script>

Answer 2

Вероятно, есть 37 различных способов сделать это.

Вопрос в том, что важно, надежность, ремонтопригодность, простота реализации, масштабируемость и т. Д.

Вот решение, которое отдает приоритет простотереализации.Он использует @change и :value вместо v-model magic.

Это оставит font2 и font3 равными нулю, если они не изменены.

new Vue({
  el: '#app',
  data: {
    font1: 14,
    font2: null,
    font3: null,
  },
  methods: {
    isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }
  }
});

  
  
  
{{ {font1:font1, font2:font2, font3:font3} }}

Answer 3

Вы можете использовать логическое значение false для обоих элементов input 1 и input 2 и обновить его до true при вводе значения.

new Vue({
  el: '#app',
  data: {
    font1: 14,
    font2: {
      value: 14,
      defined: false
    },
    font3: {
      value: 14,
      defined: false
    }
  },
  methods: {
    Chg(font) {
      if (font.value.length) {
        font.defined = true;
        return;
      }
      font.value = this.font1;
    }
  },
  watch: {
    font1() {
      if (this.font2.defined === false) this.font2.value = this.font1
      if (this.font3.defined === false) this.font3.value = this.font1
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="font1">
  <input type="number" v-model="font2.value" @input="Chg(font2)">
  <input type="number" v-model="font3.value" @input="Chg(font3)">
</div>