I have two jasons that are linked by one of them with a key. One of the jasons contains a structure that needs to be rendered recursively. The same jason contains the data that is passed to data(). And when I try to insert a string containing variable names into the template, the interpolation does not happen.
base component
<template>
<div class="main">
<jsonvuecomponent
v-for="js in midle_json"
:key="js.index"
:midle_json="js"
:low_json="low_json"
/>
</div>
</template>
<script>
import jsonvuecomponent from "@/components/jsonvuecomponent.vue";
export default {
name: "default",
components: { jsonvuecomponent },
data() {
return {
midle_json: {
"unit-element1": {
index: 1,
component: "component1",
type: "unit",
properties: {
text: "hello nekit",
name: "city",
placeholder: "Введите ваш город",
},
},
"unit-element2": {
component: "component2",
index: 2,
type: "unit",
properties: {
name: "city",
placeholder: "Введите ваш городffffffff",
},
},
"group-element": {
component: "container_component1",
index: 3,
type: "group",
properties: {
color: "black",
},
content: {
"unit-element3": {
index: 1,
component: "component3",
type: "unit",
properties: {
stal: "radio",
placeholder: "NASHMI",
},
},
"unit-element4": {
index: 2,
component: "component2",
type: "unit",
properties: {},
},
"group-element2": {
index: 3,
component: "container-component1",
type: "group",
properties: {
color: "red",
},
content: {
"unit-element5": {
index: 4,
component: "component5",
type: "unit",
properties: {},
},
"unit-element6": {
index: 5,
component: "component5",
type: "unit",
properties: {},
},
},
},
},
},
},
low_json: {
component1: {
template:
"<div> {{ properties.text }} </div><input type='text' placeholder ='{{properties.placeholder}}'>",
},
component2: {
template:
"<div class='black_square' style='width: 30px; height: 30px; background-color: black'></div>",
},
component5: {
template:
"<div class='red_square' style='width: 30px; height: 30px; background-color: pink'></div>",
},
container_component1: {
template:
"<div style='background-color: {{properties.color}}'></div>",
},
component3: {
template: "<input type='{{stal}}'>{{properties.placeholder}}",
},
},
};
},
};
</script>
<style></style>
recursion component
<template>
<div class="сomponent">
<!-- <div ref="component"></div> -->
<div v-html="content"></div>
<div v-if="midle_json.type === 'group' ? true : false">
<jsonvuecomponent
v-for="js in midle_json.content"
:key="js.index"
:midle_json="js"
:low_json="low_json"
/>
</div>
</div>
</template>
<script>
export default {
name: "jsonvuecomponent",
data() {
return {
properties: this.midle_json.properties,
content: "",
};
},
props: {
midle_json: {
type: Object,
default: {},
required: true,
},
low_json: {
type: Object,
default: {},
required: true,
},
},
methods: {
compose() {
if (this.midle_json.component in this.low_json) {
// this.$refs.component.innerHTML =this.low_json[this.midle_json.component].template;
// console.log(this.low_json[this.midle_json.component].template);
this.content = this.low_json[this.midle_json.component].template;
}
},
},
mounted() {
this.compose();
},
};
</script>
<style scoped></style>
result
<div v-html="content"></div> and v-text don't work, neither does this.$refs.component.innerHTML where component is in turn as an empty string in data()
