Question

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

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

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

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

Answer 1

如Vue documentation关于v-model所述：

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

由于您需要特定的行为，因此需要有一些方法来解码（显示时）和编码（更新时），将v-model分为:value和{{1 }}。

因此，您的下一个问题将是如何使用JavaScript解码和编码HTML实体。这里¹已经²多次³讨论了一些方式。我喜欢mathiasbynens/he库来做到这一点，所以下面是一个示例代码，展示了它与Vue一起运行的情况：

@input

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

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>

如何使用v模型绑定解码HTML实体‽

2 个答案: