1

Помогите, пожалуйста, лаконично организовать компонент Vue.

Есть параметр isLink который по условию будет рендерить ссылку router-link или просто div

<template>
  <router-link v-if="isLink" :to="link">
    // Какая то вёрстка...
  </router-link>
  <div v-else>
    // Какая то вёрстка...
  </div>
</template>

Мне хочется сделать так, что бы не нужно было дублировать код внутри элементов и всё записывать в один но при этом чтобы это была не ссылка при условии isLink === false, а простой div. Примерно так:

<template>
  <router-link v-if="isLink" :to="link">
    /* Если isLink === false, 
       то router-link будет обычный div 
    */
    
    // Какая то вёрстка...
  </router-link>
</template>
2
  • там есть параметр tag
    – Dmytro
    14 янв 2022 в 13:33
  • Да, все верно. Но даже при условии добавления параметра tag="div" элемент все равно работает как link, а мне нужно чтобы он был простым элементом, а не ссылка
    – rizetime
    14 янв 2022 в 13:37

2 ответа 2

0

Вот так будет правильнее

<template>
  <component :is="tag">{{ text }}</component>
</template>

<script>
export default {
  props: ["isLink", "text"],
  computed: {
    tag() {
      return this.isLink ? "router-link" : "div";
    },
  },
};
</script>
5
  • Если использование компонента должно быть максимально простым — этот способ отлично подойдёт. Однако этот способ не применим если контент должен отличаться при разных значениях isLink. Возможно, стоит использовать <slot> вместо {{ text }}?
    – 7-zete-7
    14 янв 2022 в 14:32
  • Возможно так же следует уточнить в ответе что это пример отдельного готового отдельного компонента, который можно будет позже использовать как замену <router-link>?
    – 7-zete-7
    14 янв 2022 в 14:43
  • @7-zete-7, ниче не понял. Это же минимальный код, который решает проблему. Если при решении задачи заказчика надо будет слот - напишите слот.
    – Dmytro
    14 янв 2022 в 15:44
  • В вопросе так и написано "Какая то вёрстка...", что подразумевает наличие не просто текста, а каких-то тегов. Прочтите вопрос внимательнее.
    – 7-zete-7
    14 янв 2022 в 19:52
  • Постарайтесь расписать как должен работать код из этого ответа. За готовое решение автор, конечно, скажет спасибо, однако заходящие по этому вопросу люди в будущем не смогут понять что происходит в этом коде.
    – 7-zete-7
    14 янв 2022 в 19:55
0

В документации Vue написано:

Иногда необходимо чтобы <router-link> отображался другим тегом, например <li>. В таком случае мы можем использовать входной параметр tag, чтобы указать нужный тег, и он всё равно будет прослушивать события click для навигации.

Если целью является стилизовать элементы в зависимости от выбранного роута, то корректнее и проще будет использовать свойства объекта Route. На основе этих свойств можно будет описать рендеринг необходимых стилизованных элементов.

<template>
  <router-link v-if="isLink" :to="link"></router-link>
  <div v-else :class="{ 'some-class': $route.path === link.path }"></div>
</template>

Если это является проблемой, то можно вынести этот код в отдельный компонент и использовать уже непосредственно новый компонент, у которого будет отсутствовать дублирование элементов.

3
  • Этот же подход, все равно предполагает дублирование кода. И вообще не расширяемый
    – Dmytro
    14 янв 2022 в 14:13
  • @Дмытрык, проблему он решает. Если есть какие-либо предложению в контексте этого ответа — буду рад улучшить ответ
    – 7-zete-7
    14 янв 2022 в 14:33
  • Как улучшить, написал отдельным ответом
    – Dmytro
    14 янв 2022 в 15:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.