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