[Vue 警告]：无效的道具：道具“值”的类型检查失败。预期的数组，得到值为 1 的数字

Posted 2023-02-16

【中文标题】[Vue 警告]：无效的道具：道具“值”的类型检查失败。预期的数组，得到值为 1 的数字

【英文标题】：[Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got Number with value 1

【发布时间】：2021-11-15 08:44:17

【问题描述】：

我有一个类型号的输入，我想让它在输入中不能打印大于 10 的数字，一切对我来说都很好，直到我用数组替换了这个值（之前 value: 1 之后值：[1, 1])

更改为数组后，我尝试手动获取数组的第一个数字作为输入的值，但出现错误，不明白如何解决

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>

在我用数组替换“value”之前，一切都对我有用，您也可以查看my code in codesandbox

【参考方案1】：

使用时

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

在 App.vue 中，您将单个值而不是数组传递给 HelloWorld.vue

因此，要么将组件中的值类型从 Array 更改为 Number，要么更改为：

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

此外，在 HelloWorld.vue 中，输入类型为 "number"，因此即使您将数组传递给组件，您也会收到警告。

那么，您需要将数组传递给子组件吗？

附：在代码框中，您有这一行缺少基础：const newValue = parseInt(event.target.value); 它应该是：const newValue = parseInt(event.target.value, 10);

【参考方案2】：

您可以将数组中的第一个元素发送到子组件，但您在 props 中以 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>