Vuejs2 Vue:v-model未定义或默认/回退

Vuejs2 Vue:v-model未定义或默认/回退,vuejs2,vue-component,Vuejs2,Vue Component,如果输入字段为空,是否可以将输入的默认值设置为另一个输入字段的值。 看起来我无法在数据或v-model属性中指定: <template> <div> <input type="number" v-model="font1 || 14"> <!-- gives error --> <input type="number" v-model="font2 || font1"> <!-- gives

如果输入字段为空,是否可以将输入的默认值设置为另一个输入字段的值。 看起来我无法在数据或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>

导出默认值{
数据(){
返回{
font1:14,
font2:this.font2 | | this.font1,//这种方法也会产生错误
font3:this.font3 | | this.font1//这种方法也会产生错误
}
}
}
欢迎任何帮助。
谢谢。

您可以将
输入1
输入2
元素的布尔值设置为false,并在输入值时将其更新为true

newvue({
el:“#应用程序”,
数据:{
font1:14,
font2:{
价值:14,
定义:false
},
font3:{
价值:14,
定义:false
}
},
方法:{
Chg(字体){
if(font.value.length){
font.defined=true;
回来
}
font.value=this.font1;
}
},
观察:{
font1(){
如果(this.font2.defined==false)this.font2.value=this.font1
如果(this.font3.defined==false)this.font3.value=this.font1
}
}
});

您可以将
输入1
输入2
元素的布尔值设置为false,并在输入值时将其更新为true

newvue({
el:“#应用程序”,
数据:{
font1:14,
font2:{
价值:14,
定义:false
},
font3:{
价值:14,
定义:false
}
},
方法:{
Chg(字体){
if(font.value.length){
font.defined=true;
回来
}
font.value=this.font1;
}
},
观察:{
font1(){
如果(this.font2.defined==false)this.font2.value=this.font1
如果(this.font3.defined==false)this.font3.value=this.font1
}
}
});

您必须结合使用
v-model
和计算属性的getter和setter来实现您想要的功能

  • 声明字体的内部数据存储,让我们调用
    f1
    f2
    f3
    。给
    f1
    您的默认值14:

    data: function()  {
      return {
        f1: 14,
        f2: null,
        f3: null,
      };
    }
    
  • 现在,当安装组件时,您需要相应地插值这些值。这可以在
    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;
    }
    
  • 最后一步是设置计算属性,以便无论何时
    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'){
    模板:“#测试”,
    数据:函数(){
    返回{
    f1:14,,
    f2:空,
    f3:空,
    };
    },
    挂载:函数(){
    this.f2=this.f2 | | this.f1;
    this.f3=this.f3 | | this.f2;
    },
    计算:{
    font1:{
    设置:功能(val){
    if(val)
    这1.f1=val;
    },
    get:function(){
    返回此文件。f1;
    }
    },
    font2:{
    设置:功能(val){
    this.f2=val | | this.f1;
    },
    get:function(){
    返回此值。f2;
    }
    },
    font3:{
    设置:功能(val){
    this.f3=val | | this.f2;
    },
    get:function(){
    返回此文件。f3;
    }
    }
    }
    });
    新建Vue({el:'\35; app'})
    
    您必须结合使用
    v-model
    和计算属性的getter和setter来实现您想要的功能

  • 声明字体的内部数据存储,让我们调用
    f1
    f2
    f3
    。给
    f1
    您的默认值14:

    data: function()  {
      return {
        f1: 14,
        f2: null,
        f3: null,
      };
    }
    
  • 现在,当安装组件时,您需要相应地插值这些值。这可以在
    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;
    }
    
  • 最后一步是设置计算属性,以便无论何时
    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'){
    模板:“#测试”,
    数据:函数(){
    返回{
    f1:14,,
    f2:空,
    f3:空,
    };
    },
    挂载:函数(){
    this.f2=this.f2 | | this.f1;
    this.f3=this.f3 | | this.f2;
    },
    计算:{
    font1:{
    设置:功能(val){
    if(val)
    这1.f1=val;
    },
    get:function(){
    返回此文件。f1;
    }
    },
    font2:{
    设置:功能(val){
    this.f2=val | | this.f1;
    },
    get:function(){
    返回此值。f2;
    }
    },
    font3:{
    设置:功能(val){
    this.f3=val | | this.f2;
    },
    get:function(){
    返回此文件。f3;
    }
    }
    }
    });
    新的Vue({el:'#app'})
    
    可能有37种不同的方法

    问题是什么是重要的,健壮性、可维护性、易实现性、可伸缩性等等

    这是一个优先考虑易于实施的解决方案。它依赖于使用
    @change
    :value
    而不是
    v-model
    magic

    这将使
    font2
    font3
    保持为空(如果未更改)

    newvue({
    el:“#应用程序”,
    数据:{
    font1:14,
    font2:null,
    font3:null,
    },
    方法:{
    isNumber(n){return!isNaN(parseFloat(n))&&!isNaN(n-0)}
    }
    });
    
    
    {{{font1:font1,font2:font2,font3:font3}}
    
    可能有37种不同的方法

    问题是什么是重要的,健壮性、可维护性、易实现性、可伸缩性等等

    这是一个优先考虑易于实施的解决方案。它依赖于使用
    @ch