Прототип возвращает мою функцию вместо возвращаемого значения - PullRequest
Новая
       12

Прототип возвращает мою функцию вместо возвращаемого значения

1 голос
/ 08 февраля 2020

Я хочу создать подзаголовок моих страниц, подобный изображению enter image description here

И я хочу сделать это, вызвав мой прототип из main. js

Vue.prototype.subtitlePage = function () {
  var path = this.$route.path;
  var array_path = path.split('/');
  var subtitle = "<ul class='subtitle'>";
  var index;
  for (index = 1; index < array_path.length - 2; index++) {
    subtitle += "<li>" + array_path[index] + "</li> >>";
  }
  subtitle += "<li>" + array_path[index] + "</li><ul>";
  return subtitle;
}

Я так называю свою функцию при создании моего экрана 

<p class="indextitle">Subir Nova Redação</p>
<p v-html="subtitlePage"></p>

Однако текст, который появляется на экране, не является возвращением html, установленным в функции, но код моей функции 

function () { var path = this.$route.path; var array_path = path.split('/'); var subtitle = "
"; var index; for (index = 1; index < array_path.length - 2; index++) { subtitle += "
" + array_path[index] + "
>>"; } subtitle += "
" + array_path[index] + "
"; return subtitle; }

Кто-нибудь знает, что я делаю неправильно и что я должен изменить в своем коде, чтобы он отображался в подзаголовке, который я настроил в функции?

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

v-html ожидает строку , в то время как функция задана, это приводит к строковому выводу функции. Это должно быть: 

<p v-html="subtitlePage()"></p>

Это никогда не должно выполняться на практике с пользовательскими данными.

Динамически отображать произвольные значения HTML на вашем веб-сайте. может быть очень опасным, потому что это может легко привести к атакам XSS. Используйте только v- html для доверенного содержимого, но не для предоставленного пользователем содержимого.

URL-адрес - это данные, определяемые пользователем. Виновник может настроить произвольно JS на стороне пользователя.

Правильный способ сделать это - создать компонент для хлебной крошки и вывести его с помощью: 

<li v-for="pathSegment in pathSegments">{{pathSegment}}</li>

В случае, если сегмент может содержать символы в кодировке URL (в этом примере пробелы и символы, не входящие в ASCII), сегменты необходимо дополнительно преобразовать в decodeURIComponent (это не рассматривается в исходном коде и будет основной опасностью для v-html).

0 голосов
/ 08 февраля 2020

Мне удалось сделать это следующим образом 

Vue.mixin({
  computed: {
    subtitlePage: {
      get: function () {
        var path = this.$route.path;
        var array_path = path.split('/');
        var subtitle = "<ul class='subtitle'>";
        var index;
        for (index = 1; index < array_path.length - 2; index++) {
          subtitle += "<li>" + array_path[index] + "</li> >>";
        }
        subtitle += "<li>" + array_path[index] + "</li><ul>";
        return subtitle; 
      }
    }
  }
})
...