Currently, I am attempting to run code inside the <script> tag.
In my setup, there are two arrays: one for the dataset and another for the structure of the repeater. The schema within each object contains a 'value' property, which serves as the default value if the dataset object does not have any value.
schema:[
{ type: 'text', name:'name', value:'John'},
{ type: 'number', name:'age', value:'0' }
]
dataset: [
{ name: 'Peter', age: 18 },
{ name: 'Luca' },
{ name: 'Anna', age: 25 }
]
I am working on creating a repeater that includes inputs and populates the data with values from the dataset.
The following code section is functioning properly, but I will explain my current issue afterward.
<template>
<div class="repeater-container">
<div class="repeater-wrapper">
<div
class="repeater-item"
v-for="(repeaterData, i) in dataset"
>
<template
v-for="(input, y) in schema"
:key="name+(i+1)+'_instance'+(y+1)"
>
{{ (dataset[i][input.name]) ? input.value = dataset[i][input.name] : '' }}
<Input
:input="input"
/>
</template>
</div>
</div>
</div>
</template>
I have implemented a loop that ensures the repeater renders the same number of items as the dataset contains. Within this loop, there is an inner loop that displays each input defined in the schema.
My goal is to extract the dataset value and use the default value if no value is present.
Although everything seems to be functioning correctly, the line: {{ (dataset[i][input.name]) ? input.value = dataset[i][input.name] : '' }} actually displays the result rather than executing silently in the background. Is there a way to achieve this without printing out the result of the ternary condition?
The Input Component belongs to me and functions properly. Omitting it here to avoid unnecessary complexity in the explanation.
Thank you for taking the time to read through this question :)