title: vue.js - v-html alternative
body: <p>I come from a react background with JSX, so using something like </p>
  
  <p><code>var test = &lt;div&gt;i am a div&lt;/div&gt;</code> </p>
  
  <p>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:</p>
  
  <p>vue component</p>
  
  <pre><code>&lt;template src="./templates/General.html"&gt;&lt;/template&gt;
  
  &lt;script&gt;
    export default {
        name: 'guide-general',
        data: function() {
            return {
                guides: [
                    {
                        title: "first",
                        description: "First description"
                    },
                    {
                        title: "second",
                        description: "second description"
                    },
                    {
                        title: "third",
                        description: `&lt;ul&gt;
                          &lt;li&gt;
                              test
                          &lt;/li&gt;
                        &lt;/ul&gt;`
                    }
                ]
            }
        },
        methods: {
  
        }
    }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>html template</p>
  
  <pre><code>&lt;article&gt;
      &lt;div v-for="guide in guides"&gt;
          &lt;h4&gt;{{ guide.title }}&lt;/h4&gt;
          &lt;div v-html="guide.description"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>