如何使用 v-model 绑定解码 HTML 实体‽答案

【问题标题】：How to decode HTML entities with v-model binding‽如何使用 v-model 绑定解码 HTML 实体‽
【发布时间】：2019-05-15 16:31:55
【问题描述】：

未被充分利用且鲜为人知的interrobang（‽，实体&#8253）需要重新流行起来！但是 Vue 不允许我将它与我的 v-model 一起使用。

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

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

它只是将值输出为字符串'Name&#8253'。我们如何展示这个神奇的符号‽

【问题讨论】：

首先是什么阻止您设置list_name: 'Name‽'？
您先生是个天才！哈哈，呵呵。

标签： vue.js html-entities v-model

【解决方案1】：

我按照 Erick Petrucelli 的建议做了以下事情。

VueProjectRoot > npm install he --save

Vue 组件文件：

<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>

【讨论】：

【解决方案2】：

如Vue documentation 中关于v-model 所述：

默认情况下，组件上的v-model 使用value 作为道具，input 作为事件。

由于您需要特定的行为，您需要有方法来解码（显示时）和编码（更新时）值，将 v-model 分为 :value 和 @input。

因此，您的下一个问题将是如何使用 JavaScript 解码和编码 HTML 实体。有一些方法已经讨论过很多¹times² here³。我喜欢 mathiasbynens/he 库来做这件事，所以这里有一个示例代码显示它与 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>

【讨论】：