@alsii
PHP, Symfony, MySQL, etc...

Как c Vue.js условно «обернуть» текст в тег?

Задача элементарная. Есть у нас некие данные в vue. Пусть это будет некоторый список

new Vue({
  el: "#app",
  data: {
    items: [
      { text: "item 1"},
      { text: "item 2", url: "https://google.com"},
      { text: "item 3"},
      { text: "item 4", url: "https://yandex.ru"}
    ]
  }
})


Теперь нужно вывести этот список так, чтобы те элементы у которых есть url были "обернуты" в тег <a> с соответствующим href, а те, у которых нет -- выводились бы простым текстом. Т.е. примерно так:

<ul>
  <li>item1</li>
  <li><a href="https://goolge.com">item2</a></li>
  <li>item1</li>
  <li><a href="https://yandex.ru">item3</a></li>
</ul>


Прблема в том, что v-if рендерит/не рендерит тег только целиком, вместе со всем содержимым. Поэтому следующий вариант работает, но приходится повторять в коде поле text дважды. Что делать, если в ссылку нужно "обернуть" большой кусок шаблона?

<ul>
  <li v-for="item in items">
    <a v-if="typeof item.url !== 'undefined'" :href="item.url">{{ item.text }}</a>
    <template v-else>{{ item.text }}</template>
  </li>
</ul>


Можно поиграться на jsfiddle
  • Вопрос задан
  • 195 просмотров
Пригласить эксперта
Ответы на вопрос 4
0xD34F
@0xD34F
Что делать, если в ссылку нужно "обернуть" большой кусок шаблона?

Выносите его в отдельный компонент.

А если там только html, без v-директив - сделайте метод, который будет генерировать то, что вам нужно, типа так.
Ответ написан
teknik2008
@teknik2008
Расскажите про GOLANG. Мне интересно
Как вариант, компонент. Пример
Ответ написан
markmariner
@markmariner
Ещё это можно сделать с помощью рендер-функции: https://ru.vuejs.org/v2/guide/render-function.html
Ответ написан
FLUNKEY
@FLUNKEY
самовар
Ну или на крайняк использовать такой костыль: https://github.com/FL3NKEY/vue-conditional-attrs
<cn-attrs :tag="item.url ? 'a' : 'span'" :attrs="{ href: item.url }">{{ item.text }}</cn-attrs>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы