How to decode HTML entities with v-model binding‽

Question

The underused and fairly unknown interrobang (‽, entity &#8253) needs bringing back into fashion! But Vue won't let me use it with my v-model.

data () {
    return {
        list_name: 'Name&#8253'
   }
}

<input v-model="list_name" type="text">
</input>

It's just outputting the value as a string 'Name&#8253'. How do we show this amazing symbol‽

Answer 1

As stated in the Vue documentation regarding v-model:

By default, v-model on a component uses value as the prop and input as the event.

As you need an specif behavior, you'll need to have methods to decode (when showing) and to encode (when updating) the value, separating the v-model into :value and @input.

So, your next problem will be just how to decode and encode HTML entities with JavaScript. There are some ways already discussed many¹ times² here³. I like the mathiasbynens/he library to do it, so here's a sample code showing it in action along with Vue:

new Vue({
  el: '#app',
  data () {
    return {
      name: 'Name&#8253'
    }
  },
  methods: {
    encode (value) {
      this.name = he.encode(value)
    },

    decode (value) {
      return he.decode(value)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/he@1.2.0/he.min.js"></script>

<div id="app">
  <input :value="decode(name)" @input="encode($event.target.value)" />
  <p>{{ name }}</p>
</div>

Answer 2

I followed Erick Petrucelli's suggestion and did the following.

VueProjectRoot > npm install he --save

Vue Component file:

<template>
    <v-textarea v-model.trim="userNote"
                label="My Notes" outlined dense
                append-outer-icon="mdi-content-save"
                @click:append-outer="saveNote"
                rows="2"
    ></v-textarea>
</template>

<script>
import he from 'he/he/';

export default {
 ...
    data() {
        return {
            userNote: 'I don&#039;t have access to them. &lt;a href=&quot;#&quot; onclick=&quot;alert(1)&quot;&gt;&lt;click&lt;/a&gt;',
        }
    },
    methods:{
        decode (value) {
            let decoded = value
            if(value){ decoded = he.decode(value) } ​
            return decoded 
         },
         saveNote(){
             // implement the save action
         }
    }
    ,created(){
    ​   this.userNote = this.decode(this.userNote)
    }
}
</script>