vuejs如何拥有许多＆lt; a＆gt; ＆lt;路由器ltink＆gt; gt; gt;或@Click函数

Question

在此处输入映像

我想拥有一张明信片，例如Twitter Post Card，如果单击任何内容明信片的一部分转到发布页面，但是当单击标签或链接时，将转到

下面的标签或链接示例 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>

点击了链接

现在，即使使用此链接或标签也 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>

即使检查google 请点击

请如何解决这个问题，您的帮助非常感谢，非常感谢您的帮助， 谢谢

Answer 1

将@单击添加到您的链接。例如：

<a href="https://google.com" @click.stop>check google</a>

这将停止的传播>单击事件到父元素元素。

---

注意：@click.stop是@conce@click =“ e =＆gt; e.stoppropagation（）”。

在这里。

---

更新，根据注释中显示的数据：

我将避免存储HTML ID数据库。那是一个非常糟糕的模式。您应该从UI层分离数据。您必须允许根据设备和介质更改UI层。我会尝试将该数据存储为String s保存标签名称，而该名称与Hastag不同，如在对象上，都包含两个。

这样的事情：

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>

如您所见，它从数据中产生HTML。该模板还应用stopPropagation（），在v-for中。