Question

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

欢迎任何帮助。谢谢。

Answer 1

大概有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>

Answer 2

您可以将use ExUnit.Case和input 1元素都设置为false的布尔值，并在输入值时将其更新为true。

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
    }
  }
});

Answer 3

您将必须结合使用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更改时，它们都会适当地更新内部字体数据存储： / p>

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>

Vue：未定义v模型或默认/后备

3 个答案: