Dynamisch Inline-CSS mit VueJS bearbeiten

Question

Wie kann ich ein Attribut eines Tags mit VueJS ändern? Ich versuche, eine einseitige App mit einem Hintergrund zu erstellen, der sich jedes Mal ändert, wenn Daten von einem Back-End abgerufen werden. Ich habe versucht, die v-bind:style und v-style zu verwenden, aber beide endete "brechen" Vue. Gibt es eine Möglichkeit, wie ich eine Methode schreiben kann wie Sie in nativen JS, die das DOM ändert? Ich habe auch versucht, eine document.getElementbyId so und so weiter zu implementieren, aber es zerstörte auch VueJS.

Mit anderen Worten, wie kann ich background-image tun: {{pic_url}};

Entschuldigung für Formatierung, auf Handy.

Answer 1

Ich hatte einige Schwierigkeiten, das funktioniert, weil es Anführungszeichen um den Inline-Stil gibt, dann zwei weitere Sätze von Anführungszeichen in 'url("")'. Wenn ich den Stil Objekt zog in ein eigenes Objekt heraus habe ich es funktioniert:

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