I may have approached this project completely wrong from the start, so any advice is greatly appreciated.
My goal is to design a simple webpage with input fields on the right and corresponding hints on the left. When an input field is focused on, the relevant hint should be highlighted on the left side.
You can view a JSFiddle demonstration here: https://jsfiddle.net/eywraw8t/210693/
However, I'm facing an issue in determining how to identify the appropriate hint to highlight (and reset the highlighting for other hints).
I was able to make it work by adding a 'highlighted' property to the field object instead of using a separate hint component. But, since the field data will eventually come from a database without a 'highlighted' parameter, utilizing a hint component seemed like a better option.
In simpler terms, my question is: How can I locate the relevant hint component when an input is focused?
JS Fiddle showing functionality without a component: https://jsfiddle.net/as2vxy79/
Failed JS Fiddle attempt using a component: https://jsfiddle.net/eywraw8t/210693/
Below is the JavaScript code outside of JS Fiddle:
Vue.component('hint', {
template: `
<div class="hint" :class="{'highlight-hint': isHighlighted }">
<slot></slot>
</div>
`,
data() {
return {
isHighlighted: false
}
}
});
new Vue({
el: "#app",
data: {
fields: [
{
'id': 'name',
'hint': 'Put the name here'
},
{
'id': 'description',
'hint': 'Put the description here'
},
{
'id': 'more',
'hint': 'Add more information here'
}
]
},
methods: {
onFocus(focusedField) {
// Need to loop through the hints somehow
// Note: There is no "hints" property in this example
this.hints.forEach(function(field) {
field.isHighlighted = (focusedField == field.id)
})
}
}
})