Dynamically Edit Inline CSS with VueJS

Question

How can I change an attribute of a tag with VueJS? I'm trying to make a one-page app with a background that changes every time it fetches data from a backend. I've tried using the v-bind:style and v-style but both ended up "breaking" Vue. Is there a way I can just write a method like you can in native JS that changes the DOM? I also tried implementing a document.getElementbyId so and and so forth but it also wrecked VueJS.

In other words, how can I do background-image: {{pic_url}};

Sorry for formatting, on mobile.

Answer 1

I had some trouble getting this working because there are quotes around the inline style, then two more sets of quotes in 'url("")'. When I pulled the style object out into its own object I got it working:

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();
  }
});