vue.js machen Ajax-Daten, die vue.js Syntax

Vue.js Version enthält: 2.xvue.js machen Ajax-Daten, die vue.js Syntax

Hallo. Ich sende eine Ajax-Anfrage in vue js an eine andere Seite und erhalte die Quelle, die die vue.js-Syntax enthält, beispielsweise Ereignisse. Wenn diese Quelle der Eigenschaft und Eigenschaft hinzugefügt wird, die zu einer Vorlage hinzugefügt wurde, kann die Ajax-Datenquelle (die die vue.js-Syntax enthält) nicht gerendert werden und funktioniert nicht ordnungsgemäß. Beispiels Vorlage ist:

<div id="app"> 
    {{{ foo }}} 
</div>

und app.js ist:

var app = new Vue({ 
    el: '#app', 
    data: { 
     foo: 'bar' 
    }, 
    mounted(){ 
     this.$http.get('/media').then(function(response){ 
      data = response.body; 
      Vue.set(app, 'foo', data); 
     }); 
    }, 
    methods: { 
     alertVideoLink: function(event){ 
      alert(event.target.href); 
     } 
    } 
});

In dem obigen Code app.js kehrt ajax Anfrage diesen Code (das heißt response.body):

<a href="/media/videos" @click.pevent.self="alertVideoLink(event)">Video Link</a>

aber dieser Link kann nicht gerendert werden und funktioniert nicht richtig! Ich teste die Render-Methode und einige nützliche Hinweise, aber keine Möglichkeit gefunden. Bitte helfen Sie ... Danke

Quelle

2017-08-23 programmer

Hört sich für mich wie ein XY-Problem an: Warum müssen Sie eine Vorlage von Ihrem API-Endpunkt zurückgeben, anstatt eines JSON, den Sie dann in eine benutzerdefinierte Komponente laden? – Terry

bitte nehmen Sie an, dieser Weg ist nur so! Die Daten, die von der Ajax-Anforderung zurückgegeben werden, enthalten die Vue-Syntax. aber ich habe keine Möglichkeit gefunden, diese Daten zu rendern. Dies ist in einigen Fällen sehr nützlich und sehr wichtig zu lösen. Vielen Dank – programmer

Wenn dies der einzige Weg ist, müssen Sie wahrscheinlich Ihren Endpunkt für Verbrauchsmaterialien neu schreiben. Es macht keinen Sinn, Template-Strings zu übergeben, wenn Sie einfach Daten übergeben und diesen Inhalt in Komponenten verweben können. Wenn Sie mit der "Nur den Code schreiben, wie ich Ihnen gesagt habe" -Mentalität zu SO kommen, sind Sie in einem falschen Forum. – Terry

Klingt, als ob Sie eine Async Component verwenden möchten. wie

Etwas ...

components: { 
    'async-media':() => Vue.http.get('/media').then(res => ({ 
    template: res.body, 
    methods: { 
     alertVideoLink (event) { 
     this.$emit('click', event) 
     } 
    } 
    })) 
}

dann in der Vorlage ...

<async-media @click="handleClickEventFromChildComponent" />

Hier ist ein Beispiel eines Timeout zu fälschen "load" eine Vorlage mit

var app = new Vue({ 
 
    el: '#app', 
 
    data: {}, 
 
    components: { 
 
    'async-media':() => new Promise(resolve => { 
 
     setTimeout(() => { 
 
     resolve({ 
 
      template: '<a href="/media/videos" @click.prevent.self="alertVideoLink($event)">Video Link</a>', 
 
      methods: { 
 
      alertVideoLink(event) { 
 
       this.$emit('click', event.target.href) 
 
      } 
 
      }   
 
     }) 
 
     }, 2000) 
 
    }) 
 
    }, 
 
    methods: { 
 
    handleClickEventFromChildComponent (href) { 
 
     console.info('Clicked on', href) 
 
    } 
 
    } 
 
});

<div id="app"> 
 
    <p>Wait 2 seconds</p> 
 
    <async-media @click="handleClickEventFromChildComponent" /> 
 
</div> 
 
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

Quelle

2017-08-24 00:32:42 Phil

Danke, Gibt es irgendwelche Möglichkeiten, dass '/ Medien' dynamisch sein können? – programmer

@ sgh370 das hängt völlig davon ab, woher es in erster Linie kommt. In Ihrer Frage ist es hart codiert – Phil

warum Ihr Skript nicht funktioniert? keine Fehler aber nicht funktioniert – programmer

@ Phils Antwort ist korrekt, aber in meinem Projekt muss geändert werden. In diesem Fall ist der bessere Weg: mit globalen Komponenten vs lokalen Komponenten, weil für diese Arbeit einfach ist.

Quelle

2017-08-24 09:18:55 programmer

vue.js machen Ajax-Daten, die vue.js Syntax

Antwort

Verwandte Themen