Improve Button & Nav-Item link handling

bootstrap-vue-bot · bootstrap-vue-bot · commit 1fe8824249a2 · 2017-02-18T11:53:46.000+03:30
diff --git a/components/button.vue b/components/button.vue
@@ -1,10 +1,11 @@
 <template>
     <button :class="classObject"
-            @click.stop.prevent="click"
+            @click="onclick"
             :href="href || to"
             :is="componentType"
             :to="to || href"
             :exact="exact"
+            :target="target"
     >
         <slot></slot>
     </button>
@@ -63,22 +64,24 @@
             },
             variant: {
                 type: String,
-                default: 'secondary'
+                default: 'primary'
             },
             to: {
                 type: [String, Object],
-                default: ''
             },
             href: {
                 type: String
             },
             exact: {
                 type: Boolean,
                 default: false
+            },
+            target: {
+                type: String,
             }
         },
         methods: {
-            click() {
+            onclick() {
                 this.$emit('click', this.to);
                 if (this.$router && this.to) {
                     this.$router.push(this.to);
diff --git a/components/nav-item.vue b/components/nav-item.vue
@@ -1,14 +1,14 @@
 <template>
     <li class="nav-item">
         <component
-                class="nav-item"
                 :class="classObject"
-                @click.stop.prevent="onclick"
-                :href="to"
+                @click="onclick"
+                :href="href || to"
                 :is="componentType"
                 active-class="active"
                 :to="to"
                 :exact="exact"
+                :target="target"
         >
             <slot></slot>
         </component>
@@ -17,47 +17,46 @@
 
 <script>
 
-export default {
-    computed: {
-        classObject() {
-            return [
-                'nav-link',
-                this.active ? 'active' : '',
-                this.disabled ? 'disabled' : ''
-            ];
-        },
-        componentType() {
-            return this.to ? 'router-link' : 'a';
-        }
-    },
-    props: {
-        active: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
+    export default {
+        computed: {
+            classObject() {
+                return [
+                    'nav-link',
+                    this.active ? 'active' : '',
+                    this.disabled ? 'disabled' : ''
+                ];
+            },
+            componentType() {
+                return this.to ? 'router-link' : 'a';
+            }
         },
-        to: {
-            type: [String, Object],
-            default: ''
+        props: {
+            active: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            to: {
+                type: [String, Object],
+            },
+            href: {
+                type: String,
+            },
+            exact: {
+                type: Boolean,
+                default: false
+            },
+            target: {
+                type: String,
+            }
         },
-        exact: {
-            type: Boolean,
-            default: false
-        }
-    },
-    methods: {
-        onclick() {
-            this.$emit('click', this.to);
-
-            if (this.to) {
-                if (this.$router) {
-                    this.$router.push(this.to);
-                }
+        methods: {
+            onclick() {
+                this.$emit('click', this.to);
             }
         }
-    }
-};
+    };
 </script>
