Generating and assembling text with vue.js

Question

Generating and assembling text with vue.js

One of the requirements states that all HTML elements must be defined in a JSON file and utilized within the template.

In order to meet this requirement, there is a function called "markComplete" that should be triggered whenever a checkbox is changed.

Sample Code:

<template>
<span v-html="htmlContent"></span>
</template>

<script>
 data(){
        return{
        htmlContent: "<input type='checkbox' v-on:change='markComplete'>"
        }
    }
</script>

The code above does not work as expected because the onChange event is not properly mounted, resulting in a

Uncaught ReferenceError: markComplete is not defined

error message.

Are there any alternative methods to ensure that this functionality works correctly?

vue.js vuejs2 vue-component

Answer 1

Answer №1

When attempting to compile the string as Vue Templates using v-html, keep in mind:

The contents are inserted as plain HTML and will not be compiled as Vue templates.

To learn more about v-html, refer to the Vue Docs.

For an alternative solution, check out this informative article

If you prefer not to use a library, consider the code snippet below:

Begin by creating a JavaScript file (ideally named RenderString.js):

import Vue from "vue"

Vue.component("RenderString", {
  props: {
    string: {
      required: true,
      type: String
    }
  },
  render(h) {
    const render = {
      template: "<div>" + this.string + "</div>",
      methods: {
        markComplete() {
          console.log('the method called')
        }
      }
    }
    return h(render)
  }
})

Next, integrate the following code into your parent component:

<template>
  <div><RenderString :string="htmlContent" /></div>
</template>

<script>
import RenderString from "./components/RenderString"

export default {
  name: "App",
  data: () => ({
    htmlContent: "<input type='checkbox' v-on:change='markComplete'>"
  })
}
</script>

Note: While I have not executed the code above, I have prepared a similar functional CodeSandbox Example

Answer 2

When attempting to compile the string as Vue Templates using v-html, keep in mind:

The contents are inserted as plain HTML and will not be compiled as Vue templates.

To learn more about v-html, refer to the Vue Docs.

For an alternative solution, check out this informative article

If you prefer not to use a library, consider the code snippet below:

Begin by creating a JavaScript file (ideally named RenderString.js):

import Vue from "vue"

Vue.component("RenderString", {
  props: {
    string: {
      required: true,
      type: String
    }
  },
  render(h) {
    const render = {
      template: "<div>" + this.string + "</div>",
      methods: {
        markComplete() {
          console.log('the method called')
        }
      }
    }
    return h(render)
  }
})

Next, integrate the following code into your parent component:

<template>
  <div><RenderString :string="htmlContent" /></div>
</template>

<script>
import RenderString from "./components/RenderString"

export default {
  name: "App",
  data: () => ({
    htmlContent: "<input type='checkbox' v-on:change='markComplete'>"
  })
}
</script>

Note: While I have not executed the code above, I have prepared a similar functional CodeSandbox Example

Generating and assembling text with vue.js

Answer №1

Similar questions

Guide to building a personalized autocomplete feature in vue js

What is the best way to trigger a particular function only when a Vue component is called by a specific component, and not by any other components?

Vue-Router with dynamically created route redirects for Server Side Rendering (SSR)

Using Vue.js to Duplicate a Component Across a Page Multiple Times

Experience the power of SSR Nuxt.js with a seamlessly integrated REST API backend

Why is TinyMCE removing my custom MPDF HTML elements?

Develop a Vue mixin to enable theme switching in a Vue.js application

Component fails to update when attribute is modified

Error loading resource in Vue npm run serve: net::ERR_CONTENT_LENGTH_MISMATCH

When executing `npm run start`, a blank page appears exclusively on the server

Optimal method for managing user session data in Vue with the power of Laravel and Inertia

Why do Computed Setters fail to refresh the View?

Error: unable to detect click event on table cell

Using VueJS to switch classes on multiple cards

Troubleshooting: Issue with v-link to classname in Vue.js

Issues with Vuetify not recognizing style adjustments

"Linking a mouse click event to a specific function within an array using

Using Vue.js to create numerous modal popups

Attaching multiple elements to events in Vue.js

Unable to overwrite class in VueJS component