ingrese la descripción de la imagen aquí
quiero tener una tarjeta postal como la tarjeta postal de twitter, si se hace clic en cualquier parte de la tarjeta postal se va a la página de publicación, pero cuando se hace clic en hashtags o enlaces se va al hashtag o enlace
ejemplo abajo 1.
<div @click="gotoPostPage" class="text-weight-light text-justify"> {{ feed.content }} <a href="https://google.com">check google</a> if you need more information then follow @benny(a tag) or follow these hashtags #google #finda, #checks, now when i click within this post take me to post page </div>ahora esto golpea la función gotoPostPage incluso si se hace clic en un enlace o una etiqueta
usando esto también 2.
<router-link :to="`/post/${ feed.id }`"> {{ feed.content }} <a href="https://google.com">check google</a> if you need more information then follow @benny(a tag) or follow these hashtags #google #finda, #checks, now when i click within this post take me to post page </router-link>va a incluso cuando se hace clic en verificar google
Por favor, ¿cómo puedo resolver esto, su ayuda es muy apreciada, gracias
Agregue @click.stop a sus enlaces. P.ej:
<a href="https://google.com" @click.stop>check google</a> Esto detendrá la propagación de eventos de click a los elementos DOM principales.
Nota: @click.stop es la abreviatura de @click="e => e.stopPropagation()" .
Actualización, basada en los datos que se muestran en el comentario:
Evitaría almacenar la base de datos de identificación HTML. Ese es un patrón realmente malo. Se supone que debes separar los datos de la capa de la interfaz de usuario. Debe permitir que cambie la capa de la interfaz de usuario, según el dispositivo y el medio. Intentaría almacenar esos datos como string que contienen un nombre de hashtag y, donde el nombre es diferente al hastag, como en el objeto, que contiene ambos.
Algo como esto:
const { createApp, reactive, computed, onMounted, toRefs } = Vue; createApp({ setup() { const state = reactive({ items: [], links: computed(() => state.items.map( item => ({ name: item.name || `#${item}`, url: item.url || `/hashtag/${item}` }) )) }); onMounted(async() => { /* replace this promise with an axios call to server which returns an array, similar to the one i'm passing here: (see axios call example below) */ const data = await new Promise(resolve => { setTimeout(() => { resolve([ 'one', 'two', 'three', 'печаль', 'грусть', { name: '#mens', url: '/hashtag/fıstıklıbaklava' }, 'чайная', 'джаз' ]); }); }) // example axios call: /* const data = await axios .get('http://endpoint-returning-data') .then(({data}) => data); */ state.items = data; console.log('See difference betwen items (received from server) \r\n\and links (same data, mapped for template):\r\n', {...state}, '\r\nMakes sense?'); }) return { ...toRefs(state), log: () => console.log('You clicked on app!') } } }).mount('#app') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="app"> <div v-for="link in links" :key="link.url" @click="log"> <a :href="link.url" v-text="link.name" @click.stop></a> </div> </div> Como puede ver, produce el HTML a partir de los datos. La plantilla también aplica stopPropagation() , en v-for .