vue.js rendent les données ajax qui contient la syntaxe vue.js

Version Vue.js est: 2.xvue.js rendent les données ajax qui contient la syntaxe vue.js

Salut. J'envoie une requête ajax en vue js à une autre page et en obtenant sa source qui contient la syntaxe de vue.js telle que les évènements. Lorsque cette source est ajoutée à la propriété et à la propriété ajoutées à un modèle, la source de données ajax (qui contient la syntaxe vue.js) ne peut pas être rendue et ne fonctionne pas correctement. Par exemple modèle est:

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

et app.js est:

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

Dans le code app.js ci-dessus, demande ajax renvoie ce code (qui est response.body):

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

mais ce lien ne peut pas être rendu et ne fonctionne pas correctement! Je suis en train de tester la méthode de rendu et quelques astuces utiles, mais pas trouvées. S'il vous plaît, aidez ... Merci

Source

2017-08-23 programmer

Cela me semble être un problème XY: y a-t-il une raison pour laquelle vous devez renvoyer un modèle de votre point de terminaison API au lieu d'un JSON que vous chargez dans un composant personnalisé? – Terry

s'il vous plaît supposer que ce chemin est seulement moyen! les données renvoyées par la requête ajax contiennent la syntaxe vue. mais je ne trouve aucun moyen de rendre ces données. C'est très utile dans certains cas et très important à résoudre. merci – programmer

Si c'est le seul moyen, alors vous avez probablement besoin de réécrire votre point final consommable. Cela n'a pas de sens de transmettre des chaînes de modèles lorsque vous pouvez simplement transmettre des données et les entrelacer dans des composants. Si vous venez à SO avec le "juste écrire le code comme je vous l'avais dit", vous êtes dans un mauvais forum. – Terry

On dirait que vous voulez utiliser un Async Component.

Quelque chose comme ...

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

Ensuite, dans votre modèle ...

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

Voici un exemple en utilisant un délai d'attente de faux "charge" un modèle

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>

Source

2017-08-24 00:32:42 Phil

Merci, Y a-t-il des façons que '/ media' soit dynamique? – programmer

@ sgh370 qui dépend entièrement d'où il vient en premier lieu. Dans votre question, il est codé en dur – Phil

pourquoi votre script n'a pas fonctionné? pas d'erreur mais pas travaillé – programmer

@ La réponse de Phil est correcte, mais dans mon projet, elle doit être modifiée. dans ce cas, la meilleure méthode est: en utilisant composants mondiaux par des composants locaux car c'est simple pour ce travail.

Source

2017-08-24 09:18:55 programmer

vue.js rendent les données ajax qui contient la syntaxe vue.js

Répondre

Questions connexes