Блог

У меня есть ввод с номером типа, я хочу сделать так, чтобы на входе они не могли напечатать число больше десяти, у меня все работало нормально, пока я не заменил значение массивом (до value: 1 после значения: [1, 1] )

После того, как я перешел на массив, я пытаюсь вручную получить первое число массива в качестве значения для моего ввода, но я получаю ошибку и не понимаю, как ее решить

Приложение.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>
 

Адский мир.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>
 

Опять же, все работало для меня, пока я не заменил « value массивом, вы также можете посмотреть мой код в codesandbox

Когда вы используете

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

В App.vue вы передаете одно значение вместо массива в HelloWorld.vue

Итак, либо вы меняете тип значения в компоненте с массива на число, либо меняете на:

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

Кроме того, в HelloWorld.vue тип ввода таков "number" , что даже если вы передадите массив компоненту, у вас будет предупреждение.

Итак, вам нужен массив, переданный дочернему компоненту?

P.S. В поле codesand у вас в этой строке отсутствует база: const newValue = parseInt(event.target.value); она должна быть: const newValue = parseInt(event.target.value, 10);

Вы можете отправить первый элемент из массива в дочерний компонент, но вы получите его в реквизитах как номер:

 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>