我有一個數字型別的輸入，我想讓它在輸入中不能列印一個大于10的數字，在我用一個陣列代替這個值之前，一切都很正常（在value: 1之后value: [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'替換成陣列之前，一切都對我有效，你也可以看看我在 codesandbox 的代碼
uj5u.com熱心網友回復：
當你在使用
時<div>
<customInput v-model="value[0]" : max-value="10" />
</div
在App.vue中，你正在向HelloWorld.vue傳遞一個單一的值，而不是一個陣列
。所以，要么你把組件中的值的型別從陣列改成數字，要么改成：
<div>
<customInput v-model="value" : max-value="10"/span> />
</div
另外，在HelloWorld.vue中，輸入型別是"number"，所以即使你把陣列傳給組件，也會有警告。
那么，你是否需要一個陣列傳遞給子組件呢？
P.S. 在codeandbox中，你有這一行缺少基礎。const newValue = parseInt(event.target.value);它應該是。const newValue = parseInt(event.target.value, 10);/code>
uj5u.com熱心網友回復：
你可以從陣列中發送第一個元素到兒童組件，但是你在道具中收到的是Number：
。Vue.component('custom-input', {
template: 'custom-input'.
<div>
<輸入 :value="值" type="數字" @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>/span>
<div id="demo">/span>
<custom-input v-model="value[0]" 。 max-value="10"/span> />
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/331536.html
標籤：
上一篇：將多個陣列相加為一個陣列
下一篇：如何將所有物件在同一直線上對齊