Dynamicznie edytuj wewnętrzne CSS za pomocą VueJS

Question

Jak zmienić atrybut tagu w VueJS? Próbuję utworzyć jednostronicową aplikację z tłem, które zmienia się za każdym razem, gdy pobiera dane z zaplecza. Próbowałem używać v-bind:style i v-style, ale oba zakończyły się "łamaniem" Vue. Czy istnieje sposób mogę po prostu napisać metodę, jak można w macierzystym JS, który zmienia DOM? Próbowałem również implementacji document.getElementbyId tak i tak dalej, ale również zrujnowało VueJS.

Innymi słowy, w jaki sposób mogę zrobić zdjęcie tła: {{pic_url}};

Przepraszamy za formatowanie na telefonie komórkowym.

Answer 1

Miałem pewne problemy z uzyskaniem tego działa, ponieważ istnieją cytaty wokół stylu wbudowanego, a następnie dwa zestawy cudzysłowów w 'url("")'. Kiedy wyciągnął przedmiot styl się do własnego obiektu Mam to działa:

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