vue.js - 如何使用 v-model 绑定解码 HTML 实体‽

Answer 1

如Vue 文档中所述v-model：

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

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

因此，您的下一个问题将是如何使用 JavaScript 解码和编码 HTML 实体。有一些方法已经讨论了很多¹次²这里³。我喜欢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>

Answer 2

我按照 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>