我開始在 vue 中從 options api 過渡到 compositon api。
我有以下代碼塊，我正在嘗試實作 2 路系結。
我正在使用ant-design-vue庫進行滑塊輸入。并嘗試將滑塊值系結到輸入欄位。
<template>
<div>
<a-row>
<a-col :span="12">
<a-slider v-model="inputValue1" :min="1" :max="20" />
</a-col>
<a-col :span="4">
<a-input-number
v-model="inputValue1"
:min="1"
:max="20"
style="marginleft: 16px"
/>
</a-col>
</a-row>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
let inputValue1 = ref(8);
return { inputValue1 };
},
};
</script>使用上面的代碼，inputValue1在 vue 開發工具中檢查時，值不會改變。
如何在 vue 3 composition api 中使用兩種方式系結？
沙箱鏈接： https ://stackblitz.com/edit/vue-pchhub?file=src/App.vue
uj5u.com熱心網友回復：
看起來你必須使用v-model:value="..."它才能作業。
<template>
<div>
<a-row>
<a-col :span="12">
<a-slider v-model:value="inputValue1" :min="1" :max="20" />
</a-col>
<a-col :span="4">
<a-input-number
v-model:value="inputValue1"
:min="1"
:max="20"
style="marginleft: 16px"
/>
</a-col>
</a-row>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
let inputValue1 = ref(8);
return { inputValue1 };
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446451.html
標籤：javascript Vue.js Vuejs3 vue-composition-api
上一篇：從VueJS中的陣列中獲取不同的值，同時保留多個資料元素
下一篇：組件可以有自己的狀態嗎？