Add stop propagation event modifier

src/components/Status/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <router-link :to="{ name: 'StatusShow', params: { id: status.id }}">
-    <el-card v-if="!status.deleted" class="status-card">
+  <el-card v-if="!status.deleted" class="status-card" @click.native="handleRouteChange()">
     <div slot="header">
       <div class="status-header">
         <div class="status-account-container">
@@ -19,7 +18,7 @@
         <div class="status-actions">
           <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
           <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
-            <el-dropdown trigger="click">
+          <el-dropdown trigger="click" @click.native.stop>
             <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
               {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
             </el-button>
@@ -92,7 +91,7 @@
           <img :src="attachment.preview_url">
         </div>
       </div>
-        <a :href="status.url" target="_blank" class="account">
+      <a :href="status.url" target="_blank" class="account" @click.stop>
         {{ parseTimestamp(status.created_at) }}
       </a>
     </div>
@@ -115,7 +114,6 @@
       {{ parseTimestamp(status.created_at) }}
     </a>
   </el-card>
-  </router-link>
 </template>
 
 <script>
@@ -215,6 +213,9 @@ export default {
     },
     handleStatusSelection(account) {
       this.$emit('status-selection', account)
+    },
+    handleRouteChange() {
+      this.$router.push({ name: 'StatusShow', params: { id: this.status.id }})
     }
   }
 }
@@ -223,6 +224,7 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
 .status-card {
   margin-bottom: 10px;
+  cursor: pointer;
   .account {
     text-decoration: underline;
     line-height: 26px;