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 that you have read and understand our privacy policy and code of conduct.

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