This particular scenario involves the execution of the runtime function twice - initially, the function operates as expected, and subsequently it swaps template1 with data from template2.
We seek assistance in resolving this issue.
<template>
<div>
<v-runtime-template :template="template1"></v-runtime-template>
<v-runtime-template :template="template2"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
import axios from 'axios'
export default {
data: () => ({
x: 0, y: 0,
template: null,
template1: null,
template2: null,
}),
components: {
VRuntimeTemplate,
},
mounted() {
let vm = this
vm.runtime();
},
methods: {
runtime(){
/* If the condition is met, assign a range of indexes to the second block */
if (this.x == -1){this.x = 11; this.y = 24;}
/* Likewise, if this condition is true, assign index range to the first block */
if (this.x == 0){this.x = -1; this.y = 12;}
this.template = `
<div class="row justify-content-center">
<div v-for="(mult, index) in mults">
<div v-if="(index > x & index < y)">
<div class="card">
<!-- -->
</div>
</div>
</div>
</div>`;
/* Determine which block was created and assign it to the appropriate template (either template1 or template2) */
if (this.x == 11){this.template2 = this.template;}
if (this.x == -1){this.template1 = this.template;}
/* There seems to be an error here where two identical blocks are obtained */
}
</script>
Why is it that when x equals 11, the condition x == -1 evaluates to false but still meets the criteria? How can the IF condition be adjusted to prevent template1 from changing during the second invocation of the runtime () function?