Escape Html characters with vue.js

hi @bestmomo,

Thanks for replying

when i use

{ { { ... } } }
or 
@{ { { ... }  } }
//it returns this error-> Use of undefined constant description - assumed 'description' (View: /home/vagrant/Code/minghan/resources/views/stage.blade.php)

@ralee I had this issue this week. In my case, I was searching a way to use Html Entities to diacritics like "é".

i have figured it out, BUT I don't really think that this is the best way to do that.

#My sentence came from my FormRequest like 'O nome é obrigatório.'

#Then I pass the value to a function, called decodeHtml, which is located in my methods on the Vue instance.

decodeHtml: function (html) {
      var txt = document.createElement("textarea");
      txt.innerHTML = html;
      return txt.value;
    }

#In your view, use this:

<p> @ { { decodeHTML(description) } } </p>

It will display the message: "O nome é obrigatório".

This was the unique solution for this problem :)

@vitorarjol

Thanks for the reply. I tried doing the exact same thing, seems like the code is not triggering the method.

<table>
    <thead colspan="2">
        <tr><p class="tableHead">Mechanical & Environment</p></tr>
    </thead>
    <tbody>
        <tr v-repeat="selectedConnector.category.specifications|filterBy MechanicalEnvironment in spec_category.name">
            <td class="tableName"><p>@{ { name } }</p></td>
            <td class="tableDescription"><p>@ { { decodeHTML(description) } }</p></td>
        </tr>
    </tbody>
</table>

decodeHtml: function (html) {
    console.log(html);
      var txt = document.createElement("textarea");
      txt.innerHTML = html;
      return txt.value;
    },

Do you know what's wrong with my implementation?

Thanks for the help.

Cheers Ralee

@ralee
Where are you calling the decodeHtml method on your html?

Remember, this method should be inside the methods property:

new Vue({
    el: '#div',
    data: {},
    methods: {
        decodeHtml: function (html) {
                var txt = document.createElement("textarea");
                txt.innerHTML = html;
                return txt.value;
            }
    }
})

Then, in the html file

<p> @ { {  decodeHTML(description) } }  </p>

This is how it works in my file:

<div v-show="errorOnSave" class="alert alert-danger">
    Ops! Corrija os seguintes erros: <br>
       <li v-repeat="error: errors">
             @ { { decodeHtml(error) } }
        </li>
</div>                 

@vitorarjol

Thanks for the help. The solution works!

Cheers Ralee

@vitorarjol

Hey, do you think it's possible to convert this to line break using the html decode method?

Cheers, Ralee

@ralee just use three {{{ to show the html content. So for your vue it would be

@{ { { description } } }

@christopher That doesn't work. Blade will try to parse it (at least in L4). The way to let it pass with triple braces to the view is:

{ @ { { description } } }

{{{ var }}}

In Blade i use this {@{{ var }}}

I don't think there is a need for any method to parse the content in html. Vue provides v-html directive. I used it in my project and the text was rendered properly.

Use this syntax

<div v-html="description"></div>

It will render it as html https://vuejs.org/v2/api/#v-html