Блог

Я долго боролся с этим и хотел бы получить некоторую помощь.
У меня есть дочерний компонент Vue3, который содержит два поля ввода.

Ребенок

 lt;templategt;  lt;labelgt;  lt;spangt;asset valuelt;/spangt;  lt;input type="number" :value="value" /gt;  lt;/labelgt;   lt;labelgt;  lt;spangt;target percentagelt;/spangt;  lt;input type="number" :value="targetPercentage" /gt;  lt;/labelgt; lt;/templategt;  

В моем основном компоненте есть кнопка, позволяющая добавлять этот компонент неограниченное количество раз в шаблон.
Я пытаюсь использовать API композиции для получения значений из этих полей ввода с помощью ссылки.

Родитель

 setup() {   // List of predefined assets  const assetList = reactive([  {  title: 'Position 1',  value: '',  targetPercentage: '',  }  ]);    const assetsRefs = ref([]);   // Make sure to reset the refs before each update.  onBeforeUpdate (() =gt; {  assetsRefs.value = [];  })   onUpdated (() =gt; {  console.log(assetsRefs)  })   return {  assetList,  assetsRefs,  }; }   

В шаблоне моего основного компонента я визуализирую эти ресурсы следующим образом

Родитель

 lt;templategt;  lt;divgt;  lt;Asset v-for="(asset, index) in assetList"  :key="index"  :value="asset.value"  :targetPercentage="asset.targetPercentage"  :ref="element =gt; { assetsRefs[index] = element }"  /gt;  lt;button @click="addAsset"gt;Add New Positionlt;/buttongt;  lt;button @click="onSubmit"gt;Calculatelt;/buttongt;  lt;/divgt; lt;/templategt;  

Чего я пытаюсь достичь, так это того, что существует какая-то двусторонняя связь между родительским и дочерними компонентами. Очевидно, что я не могу использовать v-модель в своих дочерних компонентах, потому что я уже использую реквизиты для привязки предопределенных значений из списка активов (первый блок кода).

Я уже нашел хорошие примеры списков задач с ссылками и v-для или для отправки форм, чтобы я мог отображать несколько ресурсов. Но я так и не получил рендеринга полей ввода с помощью v-for и ссылок, чтобы фактически получить входные значения.