Primero, permítanme explicar lo que sucedió, pretendo hacer un sistema de código en cascada similar, cuando haga clic en la opción de primer nivel, se mostrará (se mostrará) la opción de segundo nivel, y así sucesivamente.
Pero rápidamente me encuentro con un problema, uso v-modal bind child.value, no funciona, no sé por qué.
import { defineComponent, ref, watch } from "vue"; export default defineComponent({ props: { data: { type: Array } }, setup() { const linkedList = ref([{ value: undefined, options: props.data, }]); function handleChange(value, option) { const currentData = linkedList.value[linkedList.value.length - 1] const { level: crrentLevel } = currentData const nextData = option.find(item => item.option_index == value) const { level: nextLevel, option_index, children } = nextData // add next level data if(nextLevel > crrentLevel) { linkedList.value.push({ value: undefined, options: children }) } } return () => ( <div> {linkedList.value.map((child) => ( <a-select v-model={child.value} onChange={e => handleChange(e, child.options)} style={{minWidth: '100px'}}> {child.options.map((option) => ( <a-select-option key={option.option_key} value={option.option_index} >{option.option}</a-select-option> ))} </a-select> ))} </div> ); } })