Auto focus new field (vue@master)
HTML
<script src="https://cdn.rawgit.com/yyx990803/vue/0.12.8/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<div id="demo">
<button v-on="click: addImg('http://www.online-image-editor.com/styles/2014/images/example_image.png')">add img</button>
<div id="owl-demo" class="owl-carousel owl-theme" v-owl></div>
</div>
CSS
#owl-demo {
width: 400px;
}
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
JavaScript
new Vue({
el: '#demo',
data: {
owl : [
{"src": "http://www.online-image-editor.com/styles/2014/images/example_image.png", "alt": "cat"},
{"src": "http://owlgraphic.com/owlcarousel/demos/assets/owl4.jpg", "alt": "owl"}
]
},
methods: {
addImg: function(src, alt){
$("#owl-demo").data("owlCarousel").addItem(this.htmlWrapper(src, alt || ''));
},
htmlWrapper: function(src, alt){
return "<span class='item'>" +
"<img src='" + src + "' alt='" + alt + "'>" +
"</span>";
}
},
directives: {
owl: {
bind: function () {
$(this.el).owlCarousel({
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
beforeInit: function(){
var content = "";
for(var i in this.vm.owl){
var img = this.vm.owl[i].src;
var alt = this.vm.owl[i].alt;
content += this.vm.htmlWrapper(img, alt);
}
$(this.el).html(content);
}.bind(this)
})
}
}
}
});