Динамическое добавление атрибутов?

Question

[alex]

Пытаюсь сделать, что-то подобное:

есть переменная isLink, она либо true либо false

в зависимости от значения переменной, нужно рендерить либо
<div class="link">контент</div>
либо

<router-link to="/path" class="link">контент</router-link>

Пытался сделать так:

<component :is="isLink ? 'router-link' : 'div'" to="/path">

Но в итоге если isLink === false:
<div class="link" to="/path">контент</div>

Возможно как то динамически навесить атрибут на элемент в зависимсоит от условий?

Answer 1

[Владимир Проскурин]

Почему не сделать так?

<router-link to="/path" class="link" v-if"isLink">контент</router-link>
<div class="link" to="/path" v-else>контент</div>

Answer 2

[0xD34F]

в зависимости от значения переменной, нужно рендерить либо
<div class="link">контент</div>
либо

<router-link to="/path" class="link">контент</router-link>

Используйте v-if / v-else.

Ну или сделайте computed свойство:

<component v-bind="bullshit" class="link">контент</component>

computed: {
  bullshit() {
    const attrs = {};
    attrs.is = this.isLink ? 'router-link' : 'div';
    if (this.isLink) {
      attrs.to = '/path';
    }
    return attrs;
  }
}

Comments

[Ярослав Иванов]

И зачем опять тут const ? лепите лишь бы было ?

[Владимир Проскурин]

Ярослав Иванов, на самом деле, довольно удобно. Все, что не предполагает переопределения, лучше объявлять как const. Объекты - всегда, т.к. иначе можно случайно потерять ссылку. Так можно избежать множество ошибок.

Answer 3

[Roman K]

Можно. Создай компонент из div'а