Tengo una entrada con el número de tipo, quiero hacer que en la entrada no puedan imprimir un número mayor que diez, todo funcionó bien para mí hasta que reemplacé el valor con una matriz (antes value: 1 después de valor: [1, 1] )
Después de cambiar a una matriz, trato de obtener manualmente el primer número de la matriz como el valor de mi entrada, pero aparece un error y no entiendo cómo resolverlo.
aplicación.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>HolaMundo.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> Nuevamente, todo funcionó para mí hasta que reemplacé el ' value ' con una matriz, también puedes mirar mi código en codesandbox
cuando estas usando
<div> <customInput v-model="value[0]" :max-value="10" /> </divEn App.vue, está pasando un valor único en lugar de una matriz a HelloWorld.vue
Entonces, cambia el tipo de valor en el componente de Array a Number, o cambia a:
<div> <customInput v-model="value" :max-value="10" /> </div Además, en HelloWorld.vue el tipo de entrada es "number" , por lo que incluso si pasa la matriz al componente, tendrá la advertencia.
Entonces, ¿necesita pasar una matriz al componente secundario?
PD: en los códigos y el cuadro, le falta la base a esta línea: const newValue = parseInt(event.target.value); debería ser: const newValue = parseInt(event.target.value, 10);
Puede enviar el primer elemento de la matriz al componente secundario, pero lo recibe en accesorios como Número:
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>