Как создать кликабельный тег привязки в VueJS с отфильтрованными / преобразованными данными

Question

У меня есть приложение VueJS, которое имеет следующий стиль (предоставляемый извне) данных:

data: function() {
  return {
    posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
  }
}

Я хочу, чтобы мой шаблон проходил по сообщениям и делал все слева от точки с запятой интерактивнымтег привязки:

<li><a id="1" href="#1">1</a>:foo bar oof rab</li>
<li><a id="2" href="#2">2</a>:bar oof rab foo</li>
<li><a id="3" href="#3">3</a>:oof rab foo bar</li>

Используя фильтр, легко отделить текст от позиции привязки:

<template>
  <div>
    <v-for="post in posts">
      <li>{{ post | trimAnchor }}:{{ post | trimPost }}</li>
    </v-for>
  </div>
</template>

filters: {
  trimPost: function(value) {
    value = value.toString();
    return value.split(':')[1]
  },
  trimAnchor: function(value) {
    value = value.toString();
    return value.split(':')[0]
  },
  hashAnchor: function(value) {
    value = value.toString();
    return '#'+value.split(':')[0]
  }

Но фильтры не работают в v-bind или router-link:

<li>
  <div :id="{{ post | hashAnchor }}">
    <router-link="{{ post | hashAnchor }}">
      {{ post | trimAnchor }}
    </router-link>
  </div>
  :{{ post | trimPost }}
</li>

Каков правильный подход к получению результата, который мне нужен?Должен ли я использовать computed, и если да, то как?

Любая помощь приветствуется.

Answer 1

В таких случаях я всегда рекомендую использовать вычисляемое свойство.Он сохраняет ваш шаблон в чистоте и дает большую свободу в подготовке ваших данных.Поскольку это вычисляемое свойство, оно автоматически пересчитает, если ваши данные будут изменены.

Первая часть - создать какой-либо объект со всеми необходимыми необходимыми вам частями:

computed: {
  anchors () {
    if (!this.posts) {
      return [];
    }

    return this.posts.map(
      identifier => {
        const [anchor, text] = identifier.split(':', 2);

        return {
          anchor,
          text
        }
      }
    )
  }
}

Затем вы разрушаете его там, где вам это нужно.Я также добавил ключ к вашему v-for, предполагая, что первая часть гарантированно будет уникальной.Это должно произойти, если ваши якоря будут работать.

<template>
  <div>
    <v-for="{ anchor, text } in anchors" :key="anchor">
      <li><a :href="`#${anchor}`">{{ anchor }}</a>:{{ text }}</li>
    </v-for>
  </div>
</template>

Конечно, вы можете использовать фильтры, если это необходимо, для ссылки или тела li, если вам нужно.