Vue: v-모델이 정의되지 않았거나 기본/폴백

Vue: v-모델이 정의되지 않았거나 기본/폴백

다른 입력 필드가 비어 있는 경우 기본값을 다른 입력 필드 값으로 설정할 수 있습니까?데이터나 v-model 특성에서는 지정할 수 없는 것 같습니다.

<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>

어떤 도움이라도 환영합니다.고마워요.

아마 37가지의 다른 방법이 있을 것이다.

문제는 무엇이 중요한가, 견고성, 유지보수성, 구현의 용이성, 확장성 등입니다.

여기 구현의 용이성을 우선시하는 솔루션이 있습니다.사용법에 의존합니다.@change그리고.:value대신v-model마술.

이제 떠납니다.font2그리고.font3변경되지 않은 경우 null로 표시됩니다.

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

<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" @change="font2 = $event.target.value" :value="isNumber(font2)?font2:font1">
  <input type="number" @change="font3 = $event.target.value" :value="isNumber(font3)?font3:font1">
<pre>{{ {font1:font1, font2:font2, font3:font3} }}</pre>
</div>

를 조합하여 사용해야 합니다.v-model원하는 것을 얻기 위해 자산의 getter와 setter를 계산했습니다.

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>

둘 다 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>

언급URL : https://stackoverflow.com/questions/54874287/vue-v-model-undefined-or-default-fallback