[Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got Number w-CodePudding

I have an input with the type number, I want to make it so that in the input they cannot print a number greater than ten, everything worked fine for me until I replaced the value with an array (before value: 1 after value: [1, 1])

After I changed to an array, I try to manually get the first number of the array as the value for my input, but I get an error and do not understand how to solve it

App.vue

  <div>
    <customInput v-model="value[0]" :max-value="10" />
  </div>


<script>
import customInput from "./components/HelloWorld";

export default {
  name: "App",
  data() {
    return {
      value: [1, 1],
    };
  },
  components: {
    customInput,
  },
};
</script>

HelloWorld.vue

  <div>
    <input :value="value[0]" type="number" @input="onInput" max="10" />
  </div>


<script>
export default {
  props: {
    value: Array,
    maxValue: Number,
  },
  methods: {
    onInput(event) {
      const newValue = parseInt(event.target.value);
      const clampedValue = Math.min(newValue, this.maxValue);
      this.$emit("input", clampedValue);
      this.$forceUpdate();
    },
  },

};
</script>

Again, everything worked for me until I replaced the 'value' with an array, you can also look at my code in codesandbox

CodePudding user response：

When you are using

<div>
     <customInput v-model="value[0]" :max-value="10" />
</div

In App.vue you are passing a single value instead of an Array to HelloWorld.vue

So, either you change the type of value in the component from Array to Number, or change to:

<div>
     <customInput v-model="value" :max-value="10" />
</div

Also, in HelloWorld.vue the input type is "number" so even if you pass the array to the component you will have the warning.

So, do you need an array passed to the children component?

P.S. In the codesandbox you have this line missing the base: const newValue = parseInt(event.target.value); it should be: const newValue = parseInt(event.target.value, 10);

CodePudding user response：

You can send first element from array to children component, but you receive it in props as Number:

Vue.component('custom-input', {
  template: `
    <div>
      <input :value="value" type="number" @input="onInput" :max="maxValue" />
    </div>
  `,
  props: {
    value: Number,
    maxValue: Number,
  },
  methods: {
    onInput(event) {
      const newValue = parseInt(event.target.value);
      const clampedValue = Math.min(newValue, this.maxValue);
      this.$emit("input", clampedValue);
      this.$forceUpdate();
    },
  },
})

new Vue({
  el: '#demo',
  data() {
    return {
      value: [1, 1],
    }
  },
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
    <custom-input v-model="value[0]" :max-value="10" />
  </div>