Как декодировать HTML-объекты с помощью привязки v-модели model - PullRequest
Новая
       11

Как декодировать HTML-объекты с помощью привязки v-модели model

0 голосов
/ 14 декабря 2018

Недоиспользованный и довольно неизвестный interrobang (‽ , сущность &#8253) нуждается в возвращении в моду!Но Vue не позволит мне использовать его с моим v-model. 

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

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

. Он просто выводит значение в виде строки 'Name&#8253'.Как нам показать этот удивительный символ‽

1 Ответ

0 голосов
/ 14 декабря 2018

Как указано в документации Vue относительно v-model:

По умолчанию v-model для компонента использует value в качестве опоры и input в качествесобытие.

Поскольку вам необходимо определенное поведение, вам необходимо иметь методы для декодирования (при отображении) и кодирования (при обновлении) значения, разделяя v-model на :value и @input.

Итак, вашей следующей проблемой будет просто как декодировать и кодировать объекты HTML с помощью JavaScript .Есть несколько способов, которые уже обсуждались много 1 раз 2 здесь 3 .Мне нравится библиотека 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>
...