Dynamically edit inline CSS with VueJS

Question

How to change tag attribute using VueJS? I am trying to make a one-page application with a background that changes every time it retrieves data from the backend. I tried using v-bind:style and v-style , but both ended up breaking Vue. Is there a way that I can simply write a method as you can in native JS that modifies the DOM? I also tried to implement document.getElementbyId so on and so forth, but it also destroyed VueJS.

In other words, how to make a background image: {{pic_url}};

Sorry for the formatting on the mobile phone.

Answer 1

I had problems with this because there are quotes around the inline style, and then two more sets of quotes in 'url("")' . When I pulled the style object into my object, I got it:

https://jsfiddle.net/ahwLc3rq/

HTML

 <div id="app"> <div id="test" :style="backgroundStyle"></div> </div> 

Js

 new Vue({ el:'#app', data:function(){ return { pic_url: 'https://anchormetrics.com/wp-content/themes/bootstrap-basic-child/images/amlogo.png' } }, computed:{ backgroundStyle:function(){ return { 'background-image':'url("'+this.pic_url+'")' } } }, methods:{ fetchPic:function(){ this.$http.get('/path/to/api').then(function(response){ this.pic_url = response; }.bind(this)) } }, ready:function(){ this.fetchPic(); } });