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

Я хочу создать субтитр из моих страниц, похожий на изображение введите описание изображения здесь

И я хочу сделать это, вызвав мой прототип из 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 ответа


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


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

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; 
      }
    }
  }
})

Есть идеи?

10000