Как сделать обновление стилей?

Question

[MiMarch]

Стиль просто берется из data и не изменяется в месте с ним. Что сделать, чтобы начало работать?

<div v-bind:style="{background: 'url('+ photos[currentSlide]+ ')'}" id="slider"></div>

var photos = {
			0:'i.jpeg',
			1:'i2.jpeg',
			2:'i3.jpg'
		};


		var app = new Vue({
			el: '#slider',
			data: {
				currentSlide: 0,
				photos: {
					0:'i.jpeg',
					1:'i2.jpeg',
					2:'i3.jpg'
				}
			},
			methods: {
					changeSlideNext: function() {
						if(currentSlide == 2){
							currentSlide = 0;
						}
						else currentSlide++;
						this.el.style.backgroundImage = "url("+photos[currentSlide]+")"
					},
					changeSlidePrev: function() {
						if(currentSlide == 0){
							currentSlide = 2;
						}
						else currentSlide -= 1;
						this.el.style.backgroundImage = "url("+photos[currentSlide]+")"
					}
				}
			});

Answer 1

[0xD34F]

if(currentSlide == 2){

Забыли this. Не только тут - везде, где обращаетесь к currentSlide внутри методов.

this.el.style.backgroundImage = ...

А вот это лишнее (да и называется это свойство немного иначе). Работать с DOM напрямую не следует; кроме того, background у вас уже назначается в шаблоне - вот там его надо заменить на backgroundImage.

photos: {

Лучше сделать массивом, так гораздо проще.

https://jsfiddle.net/k9fqha3u/

Answer 2

[Vladimir Zhosan]

<div :style=`background: url(${photos[currentSlide]})` id="slider"></div>

Answer 3

[Evgeny Kulakov]

Можно попробовать сделать что-то типа:
<div v-bind:style="styleObject" id="slider"></div>
Далее в коде:

computed: {
  styleObject: function() {
   return {
     background: `url(${this.photos[this.currentSlide]})`
   }
  }
}