I have this template:

<sidebar :show="showRight" placement="right" :header="t('Sitemap')" :width="300">
	<ul class="list-unstyled">
		<li v-for="(url, key) in rest.sitemap"><a @click="rest.url = key; showRight = false">{{key}}</a></li>
	</ul>
</sidebar>

Which is a list of URL that once any is clicked, they properly close the aside component.
On the other hand, the close button and clicking the transparent overlay, does not close the aside.

In the documentation, the aside mention v-model should be used to show or hide the aside but it doesn't work and the console displays a warning about the missing show property.

When you set disabled on a select box it will grey it out and cause the hand with the stop icon to appear.

However, you are still able to interact with the select box. Clicking on it will bring up the options and you can select and deselect options and have the value state updated accordingly. Setting disabled should completely disable the widget.

Also is it possible to selectively disable items in a select box? I couldn't find any reference on how to do this in the documentation.

Hello, I can't use my router-link inside of sidebar. Navigation to another route does not trigger close event, and I can't trigger it with any way. Do you have any ideas how to solve this?

In conjunction with Vue 2.2.1 I'm using FormValidator. On my form I wrap anywhere from 2-6 fields in each of several components. Some of these components (and their fields) can be dynamically added or removed from the form.

I found that if I intentionally made a field invalid (which would make the overall state of the form validation process, i.e. valid = false) and then removed the component containing that field, the overall validation status would not be updated and hence remain false, even if the remainder of the form was valid. As I was tying the "disabled" status of a Save button to the overall validation status this left the save button disabled inappropriately.

I fixed the problem by modifying the FormValidator component, adding a watcher for the children[] array, which I found changes dynamically as elements are added or removed from the page / form:

    watch: {
        children () {
            this.validate()
        }
    }

In testing I noticed that this watcher would be called a few times (4 exactly) during the initialization of my components. This did not correspond to either the total number of validated fields on the form or the number of components, so I imagine this is related to the Vue tick / refresh interval. As the changes are occurring over multiple ticks, I get one re-validation for each of four ticks needed to update the DOM. Naturally, the watcher is also called once every time I add or remove a component containing multiple fields, so I think this is a scalable solution.

on submit of the form, i want all of the form elements to pass validation, otherwise show that they are invlid, currently i am hacking the formValidator to do this:

this.$refs.formValidator.children.forEach(el => el.eval()) // hack to validate form

should eval() be called on formValidator.validate()

The form validation in vue-strap seems a little shakey, id like to give it some love, but dont really know what you guys are aiming for

v-select with lots of options lead to a very long dropdown. without scroll we can't see the rest of the options.

The Alert component doesn't appear to last indefinitely when duration is set to zero (like it did in 1.0). It maybe as simple as replacing the val watch function with:

    val: delayer(function (val) {
      if(this.durationNum > 0) {
        this.val = false
        this.$emit('input', val)
      }
    }, 'durationNum'),

I tried creating a pull request from my local copy of wffranco/master but I'm pretty new to git and it didn't seem to work. (maybe because I don't have permission? or I could be doing something else wrong)

After I set all the values to the Select component, it always display Nothing Selected. Is there any way to set it to any value?

Hi, and thanks for updating vue-strap to be compatible with v.2 of vuejs!

Since not much is happening over at yuche/vue-strap, have you thought about adding this fork to a CDN?

Hello!
How can i handle blur event in typeahead plugin? For example when I type something, dont select suggestion values and switch focus to another form component, i still want to save the value into vuex store.

I believe
return !!~el[this.optionsValue].toLowerCase().search(search)
should be
return !!~el[this.optionsLabel].toLowerCase().search(search)

Hi, first of all, thank you for the work! :)

Is there any way of using vue-strap as a plugin? (Vue.use(VueStrap)) I am looking for a way how to inject components globally and not use mixin into every component. Looking forward to your answer.

I’m trying to get the tabs working in Laravel 5.4. They seem to work fine but I’m getting this warning

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String. (found in component at [path to the node_modules folder on my Mac]/node_modules/vue-strap/src/Tabs.vue)

I’ve got this in my component file:

<template>
<tabs v-model="activeTab" nav-style="tabs" justified>
  <tab header="zero">
    Zero
  </tab>
  <tab header="one">
    One
  </tab>
  <tab header="two" disabled>
    Two
  </tab>
  <tab-group header="group1">
    <tab header="three">
      Three
    </tab>
    <tab header="four" disabled>
      Four
    </tab>
  </tab-group>
  <tab-group header="group2">
    <tab header="five">
      Five
    </tab>
  </tab-group>
</tabs>
</template>

<script>
var tab = require('vue-strap/src/Tab');
var tabs = require('vue-strap/src/Tabs');
var tabGroup = require('vue-strap/src/TabGroup');

export default {
  mounted() {
    console.log('Component mounted.')
  },
  data: function () {
    return {
      activeTab: ''
    }
  },
  components: {
    tab,
    tabs,
    tabGroup
  }
}
</script>

I’m a bit of a noob but it looks to me this might have something to do with Vue-Strap itself. I can make the warning go away be removing line 29 from vue-strap/src/Tabs.vue or changing “Number” to “String” in the same line but I’m not sure if I’m braking anything by doing that. Like I said the tabs seem to work fine.

I have the following:

<modal title="Make Payment" v-model="modelProp.value">
  <div slot="modal-header" class="modal-header">
    <h4 class="modal-title">Make a payment</h4>
  </div>
  <div>
    <p>Make a payment</p>
    <input type="text" v-model="paidAmount"/>
  </div>
</modal>

And when I click my button to trigger the modal, I get the modal itself show and the background fade out however, the content shows "undefined, undefined, undefined". This was working a few days ago and the only thing I can see that has changed is that I've done a fresh npm install so have the latest build now.

This is what shows:

This the element source:

<div role="dialog" class="modal in" style="display: block;">
  <div role="document" class="modal-dialog">
    <div class="modal-content">undefined undefined undefined</div>
  </div>
</div>

Any clues?

When runing command npm run production, I got the following error.

/js/app.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/vue-strap/src/utils/utils.js:4,0]

But when I ran npm run dev, it was fine.
Any idea and suggestion?
Thanks.

On your Demo site, in second tab menu "direction" the v-select is not being checked even it's required, any solution?

Hello,

I think I found a bug with modal component.

// myVal is set to TRUE by default
<modal :value="myVal">
  ...
</modal>

Expected

modal should appear

Result

modal doesn't appear

Problem

modal only check for value changes but does not observe it on mounted callback

watch: {
    value (val, old) {
      if (val !== old) this.transitionstart()
    }
}

Potential solution

mounted () {
  if (this.value) this.transitionstart()
}

It also may appear when you have multiple buttons near each other
I found a workaround for that:
In src/utils/popoverMixins.js on line 31 you should provide a fallback

var popover = this.$refs.popover || {style:{}}

or do the same (as a temporary fix if you don't want to rebuild whole vue-strap) in vue-strap.js line 7436

I'm having a hard time understanding the changes in behavior with your version of this component. The issue i see is a bad infinite loop between the 'input' event and the value prop changing ... Unless i am missing something here. A working example might help me understand better.

Code currently in use (not sure how to reset showAlert variable back to false without triggering an event loop)

<template>
    <div id="modules-table">
        <alert v-on:input="alertSync" value.sync="showAlert" placement="top-right" :duration="3000" type="success" width="400px" dismissable>
            <span class="icon-ok-circled alert-icon-float-left"></span>
            <strong>Well Done!</strong>
            <p>You successfully read this important alert message.</p>
        </alert>

        <div class="row">
            <div class="col-md-12">
                <button type="button" class="btn btn-primary" @click="updateModules()">Save Changes</button>
                <a href="/modules/optimize" class="btn btn-default">Optimize</a>
            </div>
        </div>
        <div class="row">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Enabled</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="itemsLength <= 0">No Modules Found</tr>
                <tr v-else v-for="item in items">
                    <th>{{item.id}}</th>
                    <td>{{item.name}}</td>
                    <td>{{item.slug}}</td>
                    <td>
                        <label>
                            <input type="checkbox"
                                   v-model="enabled"
                                   :value="item.slug"
                                   :disabled="item.protected"
                            >
                        </label>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script type="text/babel">
    import { alert } from 'vue-strap'

    export default {
        props: ['items'],
        components: {
            'alert': alert
        },
        data: function() {
            return {
                enabled: [],
                showAlert: false
            }
        },
        mounted: function() {
            this.fillEnabledData();
        },
        computed: {
            itemsLength: function() {
                return _.keys(this.items).length;
            }
        },
        methods: {
            alertInput: function(val) {
                //this.showAlert = val;
                console.log('Event Fired: ' + val)
            },
            fillEnabledData: function() {
                _.each(this.items, function(item) {
                    if(item.enabled) {
                        this.enabled.push(item.slug)
                    }
                }.bind(this));
            },
            updateModules: function() {
                this.$http.patch('/api/v1/modules', {
                    'action': 'sync_enabled',
                    'params': {
                        'slugs': this.enabled
                    }
                }).then((response) => {
                    // success callback
                    console.log(response);
                    this.showAlert = true;
                }, (response) => {
                    // error callback
                    console.log(response);
                });
            }
        }
    }
</script>

Hi is there an example where I can define a two datepicker instance in one page?

Use case:
I want a start and end date in my form so I can have a range or date to be passed in the form.

currently when I check the example there are no indicated item for that one.

Hi,

I came across this fork since the primary isn't yet compatible with Vue 2.0. But I cannot get it to work! I'm on macOS 10.12.4 Beta (16E154a) and here's what my code looks like:

<template>

    <dropdown>
      <button slot="button" type="button" class="btn btn-default dropdown-toggle">
        Action
        <span class="caret"></span>
      </button>
      <ul slot="dropdown-menu" class="dropdown-menu">
        <li><a href="#dropdown">Action</a></li>
        <li><a href="#dropdown">Another action</a></li>
        <li><a href="#dropdown">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#dropdown">Separated link</a></li>
      </ul>
    </dropdown>

</template>

<script>
  import {dropdown} from 'vue-strap';
  export default {
    name: 'dropdown-example',
    components: {
      dropdown
    }
  };
</script>

The dropdown syntax is taken straight from the official docs.

The result is this:

Any ideas how I can fix this? Seems like there's some hardcoding assumptions that have been made about where the Dropdown.vue file resides...

Thanks!

        <alert  placement="top" duration="3000" type="danger" width="400px"  dismissable  v-if="error" >
            <span class="glyphicon glyphicon-alert"></span>
            <strong>Warning</strong>
            <p>{{ error }}</p>
        </alert>

The alert will show but the duration seems not working. Anything else needs to be set?
Thanks.

Hi! I'm using the Navbar component like so:

fiddle: https://jsfiddle.net/oLh7ho2v/1/

var App = {
 components: {navbar: VueStrap.navbar},
 template: '<navbar type="default" placement="top"><a slot="brand">Brand</a></navbar>'
}

This works with [email protected] (and wffranco/[email protected]), but not with [email protected] and wffranco/[email protected]). I got the following error:

TypeError: vnode is undefined[Learn More]  build.js%20line%20809%20%3E%20eval:4064:26
	createElm http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4064:26
	createChildren http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4173:9
	createElm http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4098:9
	createChildren http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4173:9
	createElm http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4098:9
	createChildren http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4173:9
	createElm http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4098:9
	patch http://localhost:8083/dist/build.js%20line%20809%20%3E%20eval:4518:7
	lifecycleMixin/Vue.prototype._update http://localhost:8083/dist/build.js%20

I used the following from the docs and the "Action (underlined)" button is not clickable. Am I doing something wrong?

Thanks

<dropdown>
  // main button limited only to html styling
  <u slot="button">Action (underlined)</u>
  <ul slot="dropdown-menu" class="dropdown-menu">
    <li><a href="#dropdown">Action</a></li>
    <li><a href="#dropdown">Another action</a></li>
    <li><a href="#dropdown">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#dropdown">Separated link</a></li>
  </ul>
</dropdown>

Hi, would it be possible to add a name attribute to the Datepicker input element? This attribute is already present on the other input components (checkbox, radio, input, etc). Having trouble POSTing form data from the datepicker without it.

<input class="form-control datepicker-input" type="text" v-model="val" :class="{'with-reset-button': clearButton}" :placeholder="placeholder" :name="name" <!-- NEW --> :style="{width:width}" @click="inputClick" />

Let's say I have component A that has many of component B.

If can define an accordion within A's template with simple panels containing instances of B:

<-- A's template -->
<accordion v-if="b_children" type="info">
  <panel v-for="b in b_children" :header="b.name">
    <B :someProp="b.someProp" :otherProp="b.otherProp">
  </panel>
</accordion>

And that works fine.

Let's say I want to specify a more complex header though, and programmatically determine whether the panel's type and open status:

 <-- A's template -->
<accordion v-if="b_children" type="info">
  <panel v-for="b in b_children" :isOpen="panelOpen(b.status)" :type="panelType(b.status)">
      <template slot="header">
        <h4 class="panel-title">
          {{b.name}}
          <C :status="b.status"></C>
        </h4>
      </template>
      <B :someProp="b.someProp" :otherProp="b.otherProp">
  </panel>
</accordion>

This gets messy pretty fast. It's clear to me that we're relying too heavily on the state of B to render its surrounding markup in A's template. If B is always going to be rendered in a panel, I'd prefer to render the accordion within A and the panel within B, especially if B can contain more of itself! For example:

 <-- RegressiveComponent's template -->
<panel :isOpen="panelOpen" :type="panelType">
  <template slot="header">
    <h4 class="panel-title">
      {{name}}
      <C :status="status"></C>
    </h4>
  </template>

  <!-- B's body content --> 

  <accordion v-if="children" type="info">
    <RegressiveComponent v-for="child in children" :sync="child"/>
  </accordion>
</panel>

However, when a panel is declared in this way, it becomes untoggleable.

A quick scan through the accordion and panel code shows us that panel is only toggleable if its parent Vue component (so not DOM-wise, but Vue-logic wise) has _isAccordion set to true. This is to ensure the parent contains the openChild method, which the child will then call upon opening itself to allow the oneAtATime functionality.

If I add these to the definition of RegressiveComponent, then click toggling works again:

# RegressiveComponent.coffee
  ...
  created: () -> this._isAccordion = true
  methods:
    openChild: (child) -> return   # Or the full implementation, if you need it

However, this seems like an unnecessary workaround. The events system is built into Vue Components to avoid exactly this sort of tight coupling - children should only broadcast to their parents, never directly manage them.

It looks like the Vue 1.x versions of these component actually do rely on the event system:
https://github.com/yuche/vue-strap/blob/master/src/Accordion.vue

this.$on('isOpenEvent', (child) => {
      if (this.oneAtAtime) {
        ...

My use case is where I display a "User profile update" form where the user can change their email, name, etc., but they do not have to re-enter their password when submitting the form. Therefore, I am removing the required attribute from the password inputs so the form validation will pass and the user can submit the form. With the required attribute missing, much of the form validation falls through if the user does decide to update their password and fill out the fields.

Example fiddle

1. Password field bypasses the minlength check if we start to define a password.

2. Password match field does not run validation until we enter text in that box.

In short, I'm thinking that required attribute should only be checked if the fields are empty, otherwise we still need to run the other validation checks

Hello Franco,

I am using your component sidebar importing the aside.vue file. But I have an issue I am not able to close the sidebar clicking outside. Did I miss something ?
I am using your github : https://wffranco.github.io/vue-strap/

It seems on the code there is an event emit for closing the layer, but I didn't find the on event to listen the emit.
Could you please tell me if I am using the right version of your github code ? Or did I miss something ?

Using regex in the pattern attribute on <bs-input> seems to be adding extra slashes.

<bs-input label="Example"  name="example"  pattern="^(#|@)\S+$"></bs-input>

turns into pattern="^(#|@)\\S+$" (as seen with Vue.js DevTools)

Vue Strap v2.0.0-pre.11
Node v6.9.4
PHP v7.1.1
Laravel v5.4.9

Modal shows "undefined undefined undefined" when running vue 2.1.8.

Works in 2.1.6.

Example:
https://jsfiddle.net/xmcLp8nt/2/

Hi Willem,

Congratz with the development of this great library.
I'm just having a question...
I suppose the components marked with *** on https://wffranco.github.io/vue-strap/ are the ones you're still working on ?

Thanks in advance,

Kind regards,
Johnny

vue.common.js?e881:519 [Vue warn]: Error when rendering component at C:\laragon\www\vue-strap\src\Input.vue:

Uncaught TypeError: _vm._h is not a function
at Proxy.render (eval at <anonymous> (app-3a6f2b6939.js:101), <anonymous>:5432:43)
at VueComponent.Vue._render (eval at <anonymous> (app-3a6f2b6939.js:108),  <anonymous>:2952:22)
at VueComponent.eval (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:2189:21)
at Watcher.get (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:1652:27)
at new Watcher (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:1644:12)
at VueComponent.Vue._mount (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:2188:19)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:5978:15)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:8305:16)
at init (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:2500:11)
at createComponent (eval at <anonymous> (app-3a6f2b6939.js:108), <anonymous>:4052:9)

As of v2.1.5 _h got replaced by _c. So yeah... Fix pls?

How can I set the first day of the week Monday datepicker?
It can add option first week day?

            <dropdown text="Action" type="primary">
              <li><a href="#dropdown">Action</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#dropdown">Separated link</a></li>
            </dropdown>

[Vue warn]: v-else used on element

without corresponding v-if.
vue.common.js:521 [Vue warn]: class="btn btn-{{type}} dropdown-toggle": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of
, use

.
vue.common.js:521 [Vue warn]: Failed to resolve directive: el
(found in anonymous component - use the "name" option for better debugging messages.)


​

When I place a component with a modal inside another modal the second modal gets trapped in the confines of the first.

this is not a problem when you have one component that holds the two or three modals parallel to each other

My code:
<bs-input v-model="model.numero_nc" placeholder="No. NC" required error="Please fill NC No." type="number">

Error:
Uncaught TypeError: (this.val || "").trim is not a function at VueComponent.validate (vue-strap.min.js:3) at VueComponent.boundFn [as validate] (vue.js:131) at vue-strap.min.js:3 validate @ vue-strap.min.js:3 boundFn @ vue.js:131 (anonymous) @ vue-strap.min.js:3

Not an issue in itself, but maybe should be added in the docs, I spent an entire day finding this:

import dropdown from 'vue-strap/src/Dropdown' is not ok for IE 11, (but works in Chrome and Firefox).

IE likes it only like this: import {dropdown} from 'vue-strap'

Hello

You seem active in updating v2 so I thought I'd share some thoughts here about the Aside component I'm trying to include onto my site, and maybe learn a few things =)

Issue
I am seeing a glitch where the aside div seems to display at translateX(0) for a frame, then the animation kicks in. This happens erratically. it didn't show at all on a simple test page, but it shows since I included it in a more complex site.

I wonder how to tackle this. Is Vue v-if causing the div to appear but not kicking in the animation within the same frame? A solution perhaps would be to set visibility hidden by default and then visible on anim "enter"?

Other thoughts/comments

( edit: cf. suggested changes in gist below )

(ps: the first four points above seem to work for me, on desktop , untested on mobile)

(edit: removed suggestion about dynamic instancing , that's more specific to my project)

PS: feel free to close issue if need be, this is mostly for discussion. I am hacking this component for my own site which is why I don't have a straight up pull request plus you may not like some of these changes, I don't know. So I'm bringing some ideas mostly.

can I pass a callback or is there an event emitted when hitting the cancel button on a modal ?

I use Laravel5.3 + Vue2.
Works fine on both Chrome and Firefox.But on IE11 gives me SCRIPT1002 error.
I found the problem file is that utils.js and ClickOutside.js, which is related to ES6.
Do I have any way to compile all the vue-strap to ES5 format?

The 'Zoom Modal' cannot be dismissed using either the 'Close' button or the top corner 'x'. I think this is because you don't have @cancel='zoomModal = false' in the tags.

Also, I couldn't figure out what happened to the 'dismissable' directive from the older version of vue-strap until I realized that it was always there unless you slotted in a different header. Might be good to explain this.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

import tooltip from 'vue-strap/src/Tooltip.vue';

<tooltip effect="scale" placement="bottom" content="Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod">
  <button class="btn btn-default">tooltip on bottom</button>
</tooltip>

components: { tooltip }

Vue 2.1.6

<alert v-on:input="alertSync" :value="showAlert" placement="top-right" :duration="3000" type="success" width="400px" dismissable>
            <span class="icon-ok-circled alert-icon-float-left"></span>
            <strong>Well Done!</strong>
            <p>You successfully read this important alert message.</p>
        </alert>

<slot> content returns "undefined" instead of the provided content as in the example above.

It needs to be "checked-value", not "selected-value" to make it work

Here is a gist which fixes the warnig and adds iconsFont property so you can use glyphicon or fa (Font awesome)

Also removes the default width ... works better with bootstrap grid
Also fixes window.removeEventListner typo

https://gist.github.com/purepear/df5fb8a6cc862071bb07ca5d059a0ade

I noticed after install this package that v-select does not display a placeholder in the event that there has not been a value selected yet.

(Overall the upgrades in this package are great compared to the original)

When initializing popovers and tooltips

<popover effect="fade" placement="bottom" title="Закрыть или отменить?" html="true">
    <tooltip effect="scale" placement="top" content="Закрыть или отменить">
       <button type="button" class="btn btn-default btn-xs waves-effect status to-close"  v-if="permissions.close"></button>
    </tooltip>
    <div slot="content">
        <router-link :to="{ name: 'order', params: { id: orderId }}" class="btn btn-primary btn-sm">Закрыть заказ</router-link>
        <button @click="showCancelModal()" v-if="orderStatus.id !== cancelStatusId" class="btn btn-danger btn-sm">Отменить</button>
    </div>
</popover>

i have Various errors

popoverMixins.js?b486:63 Could not find trigger v-el in your component that uses popoverMixin.
mounted @ popoverMixins.js?b486:63
callHook @ vue.common.js?e881:2335
insert @ vue.common.js?e881:2525
invokeInsertHook @ vue.common.js?e881:4352
patch @ vue.common.js?e881:4508
Vue._update @ vue.common.js?e881:2222
(anonymous) @ vue.common.js?e881:2189
get @ vue.common.js?e881:1652
run @ vue.common.js?e881:1721
flushSchedulerQueue @ vue.common.js?e881:1539
(anonymous) @ vue.common.js?e881:471
nextTickHandler @ vue.common.js?e881:420
vue.common.js?e881:433 TypeError: Cannot read property 'offsetWidth' of undefined
    at VueComponent.$nextTick (eval at <anonymous> (build.js:1944), <anonymous>:47:53)
    at Array.eval (eval at <anonymous> (build.js:735), <anonymous>:471:20)
    at nextTickHandler (eval at <anonymous> (build.js:735), <anonymous>:420:16)
logError @ vue.common.js?e881:433
vue.common.js?e881:433 TypeError: Cannot read property 'offsetWidth' of undefined
    at VueComponent.$nextTick (eval at <anonymous> (build.js:1944), <anonymous>:47:53)
    at Array.eval (eval at <anonymous> (build.js:735), <anonymous>:471:20)
    at nextTickHandler (eval at <anonymous> (build.js:735), <anonymous>:420:16)
logError @ vue.common.js?e881:433
vue.common.js?e881:433 TypeError: Cannot read property 'offsetWidth' of undefined
    at VueComponent.$nextTick (eval at <anonymous> (build.js:1944), <anonymous>:47:53)
    at Array.eval (eval at <anonymous> (build.js:735), <anonymous>:471:20)
    at nextTickHandler (eval at <anonymous> (build.js:735), <anonymous>:420:16)

vue v 2.1.6

When allowing enterSubmit and hitting the key, an Uncaught TypeError: Cannot read property 'form' of undefined appears for the following line:

It seems that the computed property input does not work correctly.

I use Vue 2.1.10 and the latest master of vue-strap.

Hello and thanks for your work!

Please, update installation readme because it is super confusing how to actually install this for Vue 2.x, because vue-strap npm package installs VueStrap V1. Thanks :)

The current version is unworkable, because

• we cannot parse the date without knowing the format
• human readable formats (in Western cultures) are not computer-friendly (e.g. d-MMM-yy is not sortable, nor are they JSON serializable)