vue change dynamiquement l'url dans la méthode

Vue modifie dynamiquement les URL dans les méthodes

Vue est un framework JavaScript populaire et facile à apprendre pour créer des applications Web complexes et interactives. Dans Vue, il est souvent nécessaire de modifier dynamiquement l'URL de la requête selon différents scénarios. C’est aussi l’une des exigences souvent rencontrées dans le développement front-end.

Cet article expliquera comment modifier dynamiquement l'URL dans la méthode dans Vue. Nous travaillerons sur un exemple de projet pour démontrer comment transmettre une URL en tant que paramètre à une méthode dans une application Vue et modifier dynamiquement cette URL grâce à des techniques telles que les propriétés calculées et les écouteurs.

Exemple d'application

Dans cet article, nous utiliserons une application Vue simple pour démontrer comment modifier dynamiquement l'URL dans une méthode. L'application utilise la bibliothèque Axios pour effectuer des requêtes HTTP et afficher les données de réponse sur la page.

Nous utiliserons le code suivant pour créer une instance Vue :

new Vue({
  el: '#app',
  data: {
    items: [],
    url: 'https://jsonplaceholder.typicode.com/posts'
  },
  methods: {
    fetchData() {
      axios.get(this.url)
        .then(response => {
          this.items = response.data
        })
    }
  },
  mounted() {
    this.fetchData()
  }
})

Dans l'exemple ci-dessus, nous définissons une instance Vue avec les caractéristiques suivantes :

1. el : lié à l'élément DOM #app, qui est l'application The élément racine du programme ;
2. data : contient un tableau d'éléments vide et une URL initiale 'https://jsonplaceholder.typicode.com/posts' ;
3. methods : contient une méthode fetchData(), qui utilise la bibliothèque Axios pour envoyer GET Demander le lien défini dans l'URL et transmettre les données de réponse au tableau items ;
4. Mounted : Cette méthode sera appelée immédiatement après la création de l'instance Vue, déclenchant ainsi l'acquisition des données.

Maintenant, nous pouvons lier cette instance de Vue avec le modèle HTML suivant :

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</div>

Dans le modèle ci-dessus, nous définissons une liste contenant un tableau d'éléments. Nous utiliserons la directive v-for et l'attribut :key pour parcourir le tableau items et afficher le titre de chaque élément dans chaque élément de la liste.

Utilisation des propriétés calculées

Maintenant, nous devons comprendre comment utiliser les propriétés calculées dans Vue pour modifier dynamiquement l'URL d'une méthode.

Les propriétés calculées sont une propriété spéciale fournie par Vue, qui peut calculer et mettre à jour les données de manière réactive. Nous pouvons utiliser des propriétés calculées pour calculer l'URL dont nous avons besoin et transmettre cette URL à la méthode fetchData().

L'exemple de code est le suivant :

new Vue({
  el: '#app',
  data: {
    items: [],
    postId: 1
  },
  methods: {
    fetchData(url) {
      axios.get(url)
        .then(response => {
          this.items = response.data
        })
    }
  },
  computed: {
    url() {
      return `https://jsonplaceholder.typicode.com/posts/${this.postId}`
    }
  },
  mounted() {
    this.fetchData(this.url)
  }
})

Dans l'exemple ci-dessus, nous supprimons d'abord l'attribut url des données et ajoutons l'attribut postId aux données. Nous avons également modifié la méthode fetchData() pour accepter une url comme paramètre.

Par la suite, nous utilisons l'attribut calculé pour définir un attribut calculé appelé url, qui calcule dynamiquement l'URL en fonction de l'attribut postId. Dans la syntaxe de la propriété calculée, nous utilisons le modèle de chaîne d'ES6 afin d'insérer le postId dans la chaîne URL.

Enfin, dans la méthode Mounted(), nous appelons la méthode fetchData() et passons l'URL de la propriété calculée en tant que paramètre à la méthode.

Utilisation des auditeurs

En plus des propriétés calculées, nous pouvons également utiliser des auditeurs dans Vue pour modifier dynamiquement l'URL d'une méthode.

Cela semble puissant, mais en fait, utiliser les auditeurs Vue est également très simple. Il suffit de définir un écouteur dans l'instance Vue. Lorsque la valeur de postId change, cet écouteur sera déclenché. Dans l'écouteur, nous pouvons rappeler la méthode fetchData() et transmettre la nouvelle URL calculée en paramètre à la méthode.

Voici un exemple de code :

new Vue({
  el: '#app',
  data: {
    items: [],
    postId: 1
  },
  methods: {
    fetchData(url) {
      axios.get(url)
        .then(response => {
          this.items = response.data
        })
    }
  },
  watch: {
    postId(newValue) {
      const url = `https://jsonplaceholder.typicode.com/posts/${newValue}`
      this.fetchData(url)
    }
  },
  mounted() {
    this.fetchData(`https://jsonplaceholder.typicode.com/posts/${this.postId}`)
  }
})

Dans l'exemple ci-dessus, nous supprimons d'abord l'attribut url des données et ajoutons l'attribut postId aux données. Nous avons également modifié la méthode fetchData() pour accepter une url comme paramètre.

Par la suite, nous utilisons l'attribut watch pour définir un écouteur nommé postId, qui est appelé lorsque le postId change. Dans l'écouteur, nous insérons d'abord le postId dans la chaîne URL, puis utilisons la méthode fetchData() pour récupérer les données.

Enfin, dans la méthode Mounted(), nous appelons la méthode fetchData() et passons le postId en paramètre à la méthode.

Résumé

Dans cet article, nous avons montré comment modifier dynamiquement l'URL dans une méthode via un exemple d'application Vue. Nous avons appris à utiliser les propriétés calculées et les écouteurs pour surveiller les modifications des données Vue et envoyer des requêtes HTTP avec l'URL modifiée.

Bien que la modification dynamique des URL en JavaScript soit un besoin courant, dans Vue, nous pouvons le faire facilement avec des techniques telles que les propriétés calculées et les écouteurs. Ces technologies facilitent la gestion d'ensembles de données complexes et dynamiques tout en améliorant la réactivité et la fiabilité des applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!