I'm looking to efficiently create multiple v-models for random properties within a deep array, where the position of attributes in arrays/objects can change dynamically. While I've managed to achieve my goal with the current setup, I'll need to render several fields in different locations on the page, making the use of v-for impractical. Is there a way to simplify this code?
<template>
<div class="builder">
<div class="sidebar">
<div class="block">
<input v-model="template[headTagIndex].children[headTagAttributesIndex].children[headTagAttributesAllIndex].attributes['font-family']" placeholder="General Font" type="text">
</div>
</div>
<div class="editor">
<div v-if="compiledTemplate" v-html="compiledTemplate.html"/>
<div v-else>Loading</div>
</div>
<div class="ads"/>
</div>
</template>
<script setup>
const {$mjml} = useNuxtApp()
const template = ref([
{
"tagName": "mj-head",
"children": [
{
"tagName": "mj-attributes",
"children": [
{
"tagName": "mj-all",
"attributes": {
"font-family": "Comic sans-serif"
}
}
]
}
]
},
{
"tagName": "mj-body",
"children": [
{
"tagName": "mj-section",
"attributes": {
"background-color": "red"
},
"children": [
{
"tagName": "mj-column",
"attributes": {
"padding-top": "100px",
"padding-bottom": "100px"
},
"children": [
{
"tagName": "mj-text",
"attributes": {
"align": "center",
"color": "#F45E43"
},
"content": "Testing component"
}
]
}
]
},
{
"tagName": "mj-section",
"attributes": {
"full-width": "full-width",
"background-color": "blue"
},
"children": [
{
"tagName": "mj-column",
"attributes": {
"padding-top": "100px",
"padding-bottom": "100px"
},
"children": [
{
"tagName": "mj-text",
"attributes": {
"align": "center",
"color": "#F45E43"
},
"content": "Testing component"
}
]
}
]
},
{
"tagName": "mj-section",
"attributes": {
"background-color": "pink"
},
"children": [
{
"tagName": "mj-column",
"attributes": {
"padding-top": "100px",
"padding-bottom": "100px"
},
"children": [
{
"tagName": "mj-text",
"attributes": {
"align": "center",
"color": "#F45E43"
},
"content": "Testing component"
}
]
}
]
},
{
"tagName": "mj-section",
"attributes": {
"full-width": "full-width",
"background-color": "teal"
},
"children": [
{
"tagName": "mj-column",
"attributes": {
"padding-top": "100px",
"padding-bottom": "100px"
},
"children": [
{
"tagName": "mj-text",
"attributes": {
"align": "center",
"color": "#F45E43"
},
"content": "Testing component"
}
]
}
]
}
]
}
])
const headTagIndex = indexOfHeadTag(template.value)
console.log(headTagIndex)
const headTagAttributesIndex = indexOfHeadTagAttributes(template.value, headTagIndex)
console.log(headTagAttributesIndex)
const headTagAttributesAllIndex = indexOfHeadTagAttributesAll(template.value, headTagIndex, headTagAttributesIndex)
console.log(headTagAttributesAllIndex)
const compiledTemplate = generateCompiledTemplate($mjml, template.value)
</script>
The areas that require optimization are:
v-model="template[headTagIndex].children[headTagAttributesIndex].children[headTagAttributesAllIndex].attributes['font-family']"And:
const headTagIndex = indexOfHeadTag(template.value)
console.log(headTagIndex)
const headTagAttributesIndex = indexOfHeadTagAttributes(template.value, headTagIndex)
console.log(headTagAttributesIndex)
const headTagAttributesAllIndex = indexOfHeadTagAttributesAll(template.value, headTagIndex, headTagAttributesIndex)
console.log(headTagAttributesAllIndex)