vue.js - v-html 替代品

Question

I come from a react background with JSX, so using something like

var test = <div>i am a div</div>

to set the html of some things is pretty common. I know you can achieve the same thing using v-html, but was wondering if it was the best/safest way to do so given my following code:

vue component

<template src="./templates/General.html"></template>

<script>
  export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description"
                  },
                  {
                      title: "second",
                      description: "second description"
                  },
                  {
                      title: "third",
                      description: `<ul>
                        <li>
                            test
                        </li>
                      </ul>`
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<style scoped>
</style>

html template

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-html="guide.description">
        </div>
    </div>
</article>

Answer 1

If you want to include the ability to have HTML rendered from a vue property, you're going to need to use v-html . If you're allowing users to modify the property that the HTML may come from, then you're going to run into security concerns with XSS vulnerabilities, in which case you'll need to sanitize your inputs when the data is sent back to the server (I highly encourage you to use a reputable external library for this). If users won't be modifying your data, then there should be no safety concerns with using v-html at all.

Whenever you allow users to modify data of any kind, you open yourself up to potential security issues. You'll just need to anticipate what those issues are and work around them.

---

June 2021 Update

To clarify a point, if you don't need dynamic HTML rendering and only need to handle a conditional case for rendering certain predetermined HTML templates, then you can simply include conditional rendering in your Vue template. An example may look like this:

<script>
    export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description",
                      as_list: false
                  },
                  {
                      title: "second",
                      description: "second description",
                      as_list: false
                  },
                  {
                      title: "third",
                      description: "test",
                      as_list: true
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-if="guide.as_list">
            <ul>
                <li>{{guide.description}}</li>
            </ul>
        </div>
        <div v-else>{{guide.description}}</div>
    </div>
</article>

In short, if you don't need dynamic HTML rendering and only need conditional HTML rendering, then use v-if where applicable and structure your data to allow for conditional rendering to function correctly. Otherwise use v-html , or possibly even structure JSON data to recursively generate predefined components using <component :is="component.name"> (this is fairly complicated, so I will not be going into detail in this answer).