代码之家 › 专栏 › 技术社区 › prettyInPink

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

vue-component vuejs2

prettyInPink · 技术社区 · 7 年前

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

欢迎任何帮助。谢谢。

0 回复 | 直到 7 年前

Daniel 7 年前

可能有37种不同的方法。

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

font2 和 font3 如果未更改,则为空。

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>

Terry 7 年前

v-model 以及计算属性的getter和setter来实现您想要的。

声明字体的内部数据存储,我们调用 f1 , f2 f3 . 给予 一层

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', {
  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>

Quentin 7 年前

input 1 和 input 2

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>