Vue.js v-runtime-template is unable to retrieve the root property

Here is my page.vue file:

<template>
   <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
 
export default {
  data: () => ({
    template: `
      <span>{{sample}}</span>
    `
  }),
  components: {
    VRuntimeTemplate
  },
  computed:{
    sample(){ return "sampledata" }
  }
};

This is content from my package.json file:

"vue": "^2.6.11",
"v-runtime-template": "^1.10.0"

The issue I am facing is the following error in the console:

vue.esm.js?a026:628 [Vue warn]: Property or method "sample" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property..

I have searched through some Github issues, such as this one, which discussed a similar problem.

If anyone has any insights on how to resolve this issue with my simple implementation of the v-runtime-template library, I would greatly appreciate it. Thank you.

javascriptvue.jsvue-cli

Answer №1

This trick may have seemed unlikely to solve my problem at first, but it turned out to be a lifesaver. Check out the original source here by H.Eden I managed to resolve my issue by creating a new vue file as v-runtime-template pivot.

Here's the RuntimePivot.vue code:

<template>
  <v-runtime-template :template="`<div>${template}</div>`"></v-runtime-template>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
export default {
    props:['template','props','listener'],
    components:{
        VRuntimeTemplate
    },
    name:"RuntimePivot",
    data(){
        return {
            myname:'everything'
        }
    },
    
}
</script>

Next, I included the runtimePivot.vue template in my Page.vue:

<template>
  <div>
    <RuntimePivot :template="template" :props="properties" /> 
  </div>
</template>

<script>
import RuntimePivot from "./RuntimePivot";
export default {
    components:{
        RuntimePivot 
    },
    name:"Page",
    data(){
        return {
            template:`<span>{{key}}</span>`,
            properties:{key:"value"}    
        }
    },    
}
</script>

If anyone has a better solution, feel free to share it!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Center the image on top of the text`

Currently, I am working with Bootstrap 4 to create a component that includes two tiles. Each tile has an icon image on the left side and a hyperlink on the right side. On desktop view, the tiles should be displayed horizontally and vertically centered. How ...

javascripthtmlcssbootstrap-4

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

javascriptformsvue.jsbootstrap-4form-submit

What could be causing the error "SyntaxError: Expected token ']' to appear" to pop up?

Recently, I have been working on implementing a 'night mode' feature for a website. However, every time I attempt to execute the script, an error message pops up: "SyntaxError: Expected token ']'" on line 9. The problematic line in ...

javascript

Send a signal to a space, leveraging the distinct characteristics of each socket as input parameters

I am looking to send a function to a group of sockets, with each socket receiving the function along with a specific parameter unique to that particular socket. In my coding scenario, this distinctive variable represents the player's number. As socke ...

javascriptnode.jssocket.io

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

javascripthtmlarraysperformancevue.js

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

javascripthtmlthree.jscoordinatesscene

Power Punch - Interactive Click Functionality

My question pertains to the click binding in Knockout and a specific behavior that I have observed. While there are numerous questions about click bindings on this platform, none seem to address the behavior I am encountering. I have grasped that in Knock ...

javascriptknockout.jsdata-binding

What is the most effective method for managing various types of single quotes (’) and (') in jQuery, Perl, and Mechanize?

Recently, I encountered an issue with a form in HTML that I'm submitting using jQuer.ajax to a Perl script which uses Mechanize to process the form on a specific URL. Everything seems to be working fine, except for one thing - when I check the informa ...

javascriptjqueryperlformsmechanize

Animating Text Changes with JavaScript and jQuery

In my HTML, I have an input type="text" element and I want to attach an event handler that triggers when the text is changed. The issue arises because this input's value is dynamically updated by another JavaScript function, causing the event handler ...

javascriptjquery

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

Currently, I am working on an interface where I need to implement the following structure: export interface Passenger { id: number, name: string, checkedIn: boolean, checkedInDate?: Date // <- Is it possible to make this f ...

javascriptangulartypescript

Modifying Data with MomentJS when Saving to Different Variable

After attempting to assign a moment to a new variable, I noticed that the value changes on its own without any modification from my end. Despite various attempts such as forcing the use of UTC and adjusting timezones, the value continues to change unexpec ...

javascriptangulartypescriptmomentjs

Exploring Firefox webpage data with JavaScript or browser extensions

Have you ever wondered if it's possible to retrieve the "Modified" information seen in Firefox when selecting "View page Info" by just using a JavaScript extension? ...

javascriptfirefoxfirefox-addonfirebug

Creating static files using relative paths in Nuxt

Is there a way to customize the file paths when generating static files using yarn run generate? For instance, I am trying to achieve <img src="images/image.png"> instead of the default <img src="/image/image.png>. I attempted to modify the co ...

vue.jswebpacknuxt.js

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

When a button is clicked, the function below is called. It retrieves data from a JSON file and stores it if a success message is received. Here is a screenshot of the returned data. My JavaScript function is working correctly, but I am new to Angular and l ...

javascriptjqueryjsonajaxangular

webpack is failing to load SVG files

My application structure includes: /webapp /lib /assets ic_add_black_24px.svg ic_clear_black_24px.svg .. .. The configuration in my webpack.config.js looks like this: var path = require('path'), webpack = requ ...

javascriptangularjssvgwebpack

Implementing dynamic page titles in Vuejs

I have created an application with a header that displays the title of each page. Currently, I am using view-router to define these titles. { path: '/events', name: 'events', component: Events, meta: { title: &a ...

laravelvue.js

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

javascriptcssreactjscss-transitions

Storing combined data as an object within a single field in Laravel's store functionality

Currently, I am facing a challenge in storing repeater data into the database using Laravel. To achieve this, I need to merge some data with varying values. The structure of my form is as follows: <div v-for="(tab, tabIndex) in tabs" :key=&qu ...

laravelvue.js

Creating Highcharts series with dynamic addition of minimum and maximum values

I am currently working with a Highcharts chart that includes multiple tabs allowing users to display different data on the graph. I am dynamically adding series for each of these data points, which has been functioning well. However, I have encountered an ...

javascripthighcharts

Is it possible to check dynamically if a string contains multiple substring matches?

Currently, I am in the process of developing a search suggest feature that will provide the best match based on certain criteria. Below is the code snippet along with my explanatory comments. /* string = {"Canna Terra PLUS 50 Litres", "Canna Vega ...

javascriptarraysstringmatch