Vue 2 array style issue
Test fiddle to show issue in vue 2.0
by Max Liashuk
HTML
<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<div id="app">
<!-- This change works in Vue 1.X -->
<div
class="block"
:style="[currentZoomStyle, bgi(currentSlide)]"
></div>
<!-- /This change works in Vue 1.X -->
<button @click="onButtonClick"> Click to change </button>
<pre>
{{ bgi(currentSlide) | json}}
</pre>
</div>
CSS
.block{
height: 150px;
width: 150px;
outline: 1px solid red;
}
Babel + JSX
new Vue({
el: '#app',
data: {
current: 0,
images: [
'http://lorempixel.com/150/150/?1',
'http://lorempixel.com/150/150/?2'
]
},
computed: {
currentZoomStyle(){
return {
backgroundPosition: `50% 50%`
}
},
currentSlide(){
return this.images[this.current];
}
},
methods: {
bgi(url){
return {
backgroundImage: `url('${url}')`
}
},
onButtonClick(){
this.current = (this.current === 0) ? 1: 0;
}
}
})