0
votes

Axios obtient un profil unique

q) Quelle est la voie correcte de passer une pièce d'identité et obtenir "GET" -Request à l'aide de Axios et de Vue.

J'ai un composant VUE qui a un objet de données et PID -Key avec la valeur. P>

J'ai vérifié que pid a une valeur. P>

ID de profil: {{Â pid}} p>

donne la valeur 1. P>

data() {
    return {          
      pId: ''
    }
  },
methods: { 
    loadProfile(){
        this.status = 'Loading ....';
        axios.get("/profile/${pId} ")

        .then(function(response){
           this.profile = response.data.profile;
        })
        .catch(e => {
        this.errors.push(e)
        })
      },
init(){
        console.log('Profile mounted');
        EventBus.$on('creds' , key =>{
             [this.pId, this.uId] = key;
        })
}
  mounted(){
    this.init()
  },
  created: function() {

    this.loadProfile();
  }

Quand je passe pid comme ceci: axios.get ("/ profile / $ {pid}" code> li>
URL est: http://192.168.10.101:8000/profile/ $% 7Bpid % 7D LI>
ce qui signifie que PID est une chaîne non de valeur. p> li>
J'ai essayé ceci p> axios.get ("/ profil" + ceci.pid) code> p> li>
qui me donne http://192.168.10.101:8000/profile p> li>
sans identité de profil, p> li>
a également essayé passer par paramètre, mais ce n'est pas correct. p> li>
Si I ID Code ID de profil, je vais recevoir un profil de Laravel, P> Li>
http://192.168.10.101:8000/profile/1 li>
Donc, la route est d'okey au bord de la laravad. Li> ul> merci Mika. p> p>

axios vuejs2 laravel-7.x

0 commentaires

3 Réponses :

0
votes

Vous devez utiliser `` pour la chaîne de modèle.

So correct WAY est: axios.get (`/ profil / $ {this.pid}`)

9 commentaires De cette façon, je ne peux pas obtenir de valeur PID, mon URL de demande est 192.168.10.10101:8000/Profile Votre this.pid est vide. D'où vous voulez l'obtenir? Je vois votre code, vous définissez pid dans monté et appelez API dans créé , dans VUE Lifecycles créé est appelé avant monté . ID de profil: {{pid}}, me donne la valeur 1. Quand je regarde VUETools: Data -> PID: 1. Eventbus. $ Sur ('Creds', clé => {[this.pid, this.uid] = clé;}) apportez-moi de la valeur pour PID. Voir mon dernier commentaire. Je suis confus, quand eventbus. $ Sur («crédits», écouteur d'événements: renvoyez «Credits». - Ceci est un tableau, non? - Comment ces données de retour vont à l'objet de données? - J'ai essayé de le lire dans la console, comme Ceci: console.log ('ID de profil:' + this.pid); il est vide. Mais à l'intérieur ID de profil: {{{pid}}, me donne la valeur 1. Déménagement du code eventbus sous créé. créé: fonction () {this.init () console.log ('ID de profil:' + this.pid); cela.LoadProfile (); cela.status = ''; } n'a pas fait de différence. Call init dans créé et loadProfile dans monté . Code déplacé par commentaire de CortAppys, toujours aucun identifiant de profil.

0 votes Les cordes contenant des variables doivent être enveloppées dans un accent grave (`) non citation (') ou double citation (") xxx pré> utilise également des accessoires de passage directement à partir du routeur: p> https://router.vuejs.org/guide/essentials/passing-props.html P> XXX PRE> Vous devez donc ressembler comme suit: P> // Profile.vue <template></t <script> export default { name: 'profile', props: ['pId'], methods: { loadProfile() { const vm = this // Ensure expected scope of reference to "this" is maintained in the anonymous Axios callback functions as the component: const pId = this.$route. vm.status = 'Loading ....'; axios.get(`/profile/${vm.pId}`) .then(response => { vm.profile = response.data.profile; }) .catch(e => { vm.errors.push(e) }) } init() { console.log('Profile mounted'); const vm = this EventBus.$on('creds' , key => { [vm.pId, vm.uId] = key; }) } mounted () { this.init() }, created () { this.loadProfile(); } } </script> 2 commentaires Si const pid = ceci. $ route. est associé à Vuo-routeur, je ne l'utilise pas. C'est un appel de l'API simple à Laravel Backend. Je reçois une erreur "[Vue Warn]: Erreur dans Croy Crochet:" TypeError: ceci. $ Route est indéfinie "" Pourquoi ne pas l'utiliser? Vous devrez utiliser une autre méthode LIB ou personnalisée pour accroître la valeur de l'URI, VUE Routeur vous sauvera simplement un monde de douleur, sinon vous faites quelque chose de très simple à faire très compliqué. 0 votes Problème résolu final: premier fichier séparé créé pour eventbus.js. p> Import Vue de 'Vue' Exporter le nouveau VUE () P> li> Composant de l'expéditeur: (tableau de bord) Convertir des données d'accessoires à l'objet de données. P> accessoires: {pid:}, code> p> data () {retour {profilé: this.pid}}, code> p> li> Méthodes créées: P> {init () {const upe charge = { code> p> profilé: this.profileid} code> p> eventbus. $ EMIT ('Credits', charge utile); code> p> console.log ('ID de profil envoyé:', charge utile.profileid); code> } p> loadProfile(){ this.status = 'Loading ....'; axios({ url: '/profile/' + this.profileId, method: 'get' }) composant récepteur: données () { code> retour { code> Statut: '', code> ProfilID: 'Chargement de ...', Code> P> li> ol> xxx pré> a finalement passé + ceci.profileid à axios. p> xxx pré> ... non nécessaire VUE-routeur, seulement Comprendre comment Eventbus fonctionne. Grâce à ce lien: https://medium.com / Easyread / Vue-AS-Event-Bus-Life-Is-Happier-7A04FE5231E1 P> P> 0 commentaires

Articles qui pourrait vous intéresser :
node.js axios télécharger le flux de fichiers et writeFile
TypeError: func.apply n'est pas une fonction
Impossible de rendre le tableau dans React à l'aide de Array.map
Comment puis-je utiliser un état dans une URL pour créer un get en utilisant axios dans reactjs