Can anyone assist me with populating specific input fields on a form using Vue 3? Currently, when a user selects an option from my dropdown menu, all inputs are displayed instead of just the relevant ones.
Below is the select dropdown code:
<select
v-model="selectedInverter"
@change="onChange($event)" >
<option
v-for="(item, index) in options"
:value="item.inverter"
:key="index" >
{{ item.inverter }}
</option>
</select>
Here are the available options:
export default {
name: "ExampleOptions",
data() {
return {
address: "",
stakeAddress: "",
selectedInverter: null,
addressError: "",
apiKey: null,
filteredOptions: "",
options: [
{
inverter: "None",
options: []
},
{
inverter: "Eagle",
options: [
{
name: "Cloud ID",
value: null,
description:
"The Rainforest cloud id used to access your system data",
type: "text",
required: true
},
{
name: "User",
value: null,
description: "The Rainforest cloud username",
type: "text",
required: true
},
{
name: "Password",
value: null,
description: "The Rainforest cloud password",
type: "password",
required: true
}
]
},
{
inverter: "Efergy",
options: [
{
name: "Token",
value: null,
description: "The Efergy token used to access your system data",
type: "text",
required: true
},
{
name: "Power",
value: null,
description:
"The Efergy power key, usually 'PWER' or 'PWER.1234' where 1234 is the sid",
type: "text",
required: true
}
]
}
]
};
},
Check out my example on Codepen: https://codepen.io/pistell/pen/BaJPjgq
Currently, all dropdown examples are visible at once. How can I only show the options related to the selected dropdown item? Also, I am utilizing Tailwind CSS for styling.