Как сделать ссылку?

Question

[Now159]

Имеется карточка, на ней на всей ссылка на страницу, кроме того есть отдельные кнопки типа добавление в избранное.
Как сделать элемент так, чтобы работала именно отдельная ссылка, а не общая при клике "в избранное"?
В голову приходит только разность абсолютов, может есть другой способ?

Answer 1

[LJ322]

@click.stop не подойдёт? Поставьте его в тот элемент, который глубже находится, чтобы событие с него выше не всплывало

Comments

[Now159]

Спасибо))

Answer 2

[Wispik]

При клике на favorite добавь модификатор stop
<div @click.stop='...' >

Comments

[Now159]

Спасибо большое, действительно классно)

Answer 3

[Илья Климов]

Можно при клике на нужную вам ссылку использовать vue-router, для правильного перевода по нужному вам адресу:

<a @click="$router.push('/adress/')" class="link">Название</a>

Имейте ввиду, что нужно ещё и установить сам роутер в проект!

Comments

[Now159]

тут проблема не в правильности перехода а именно вопрос верстки. при клике общая ссылка находиться над всеми возможными другими

[Илья Климов]

Now159, принял. Но без видимости кода и макета проекта могу лишь посоветовать поиграться с z-index у каждого элемента. Если подгрузите проект в CodePen, то возможно, смогу чуть более точно помочь.

[Now159]

<div class='product' @click='$router.push(`/offer/${product.slug}`)' @mouseover='checked = true'
       @mouseleave='checked = false'>
    <div class='product__wrapper-img'>
      <img class='product__wrapper-img-src' :src='product.src' alt=''>
      <div @click='product.isFavorite = !product.isFavorite' class='product__wrapper-img-favorite'>
        <img :src='product.isFavorite ? "/icoNew/star-active.png" :"/icoNew/star.png"'>
      </div>
      <div v-if='product.allPrice !== null' class='product__wrapper-img-sale'>
        <img src='/icoNew/sale.png' alt=''>
      </div>
    </div>
  </div>

примерно так, лишнее убрал
при клике на favorite реагирует верхняя ссылка

[Илья Климов]

Now159, попробуем так:

<div class='product' style="z-index: 1;" @click='$router.push(`/offer/${product.slug}`)' @mouseover='checked = true'
       @mouseleave='checked = false'>
    <div class='product__wrapper-img'>
      <img class='product__wrapper-img-src' :src='product.src' alt=''>
      <div @click='product.isFavorite = !product.isFavorite' class='product__wrapper-img-favorite' style="z-index: 2">
        <img :src='product.isFavorite ? "/icoNew/star-active.png" :"/icoNew/star.png"'>
      </div>
      <div v-if='product.allPrice !== null' class='product__wrapper-img-sale'>
        <img src='/icoNew/sale.png' alt=''>
      </div>
    </div>
  </div>

Но опять же, пока не потыкаю сам, могу ошибаться :(

[Now159]

не работает, есть решение сделать общую абсолютмаску с z-index 1, а все кнопки ставить в z-index 2 и тоже абсолютом, просто оно не совсем мне подходит, поэтому подумал может кто способ получше знает

[Илья Климов]

Now159, печально. Тогда ничего более путёвого, пока, предложить не могу. Удачи в решении.