vue menukar url dalam kaedah secara dinamik

Vue menukar URL secara dinamik dalam kaedah

Vue ialah rangka kerja JavaScript yang popular dan mudah dipelajari untuk membina aplikasi web interaktif yang kompleks. Dalam Vue, selalunya perlu menukar URL permintaan secara dinamik mengikut senario yang berbeza. Ini juga merupakan salah satu keperluan yang sering dihadapi dalam pembangunan front-end.

Artikel ini akan memperkenalkan cara menukar URL secara dinamik dalam kaedah dalam Vue. Kami akan mengusahakan contoh projek untuk menunjukkan cara menghantar URL sebagai parameter kepada kaedah dalam aplikasi Vue dan menukar URL ini secara dinamik melalui teknik seperti sifat yang dikira dan pendengar.

Aplikasi Contoh

Dalam artikel ini, kami akan menggunakan aplikasi Vue mudah untuk menunjukkan cara menukar URL secara dinamik dalam kaedah. Aplikasi ini menggunakan perpustakaan Axios untuk membuat permintaan HTTP dan memaparkan data respons pada halaman.

Kami akan menggunakan kod berikut untuk mencipta tika 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()
  }
})

Dalam contoh di atas, kami mentakrifkan tika Vue dengan ciri-ciri berikut:

1. el : terikat pada elemen DOM #app, iaitu elemen akar aplikasi;
2. data: mengandungi item tatasusunan kosong dan URL awal 'https://jsonplaceholder.typicode.com/posts'; 🎜>
kaedah: Mengandungi kaedah fetchData(), yang menggunakan pustaka Axios untuk menghantar permintaan GET ke pautan yang ditakrifkan dalam URL dan menghantar data respons kepada tatasusunan item
dilekapkan: dihidupkan contoh Vue Selepas penciptaan, kaedah ini akan dipanggil serta-merta, mencetuskan pemerolehan data.

Kini, kita boleh mengikat tika Vue ini dengan templat HTML berikut:

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

Dalam templat di atas, kami mentakrifkan senarai yang mengandungi tatasusunan item. Kami akan menggunakan arahan v-for dan atribut :key untuk melingkari tatasusunan item dan memaparkan tajuk setiap item dalam setiap item senarai.

Menggunakan Sifat Terkira

Kini, kita perlu memahami cara menggunakan sifat terkira dalam Vue untuk menukar URL dalam kaedah secara dinamik.

Harta yang dikira ialah harta khas yang disediakan oleh Vue, yang boleh mengira dan mengemas kini data secara responsif. Kami boleh menggunakan sifat yang dikira untuk mengira URL yang kami perlukan dan menghantar URL ini kepada kaedah fetchData().

Kod sampel adalah seperti berikut:

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

Dalam contoh di atas, kami mula-mula mengalih keluar atribut url daripada data dan menambah atribut postId pada data. Kami juga mengubah suai kaedah fetchData() untuk menerima url sebagai parameter.

Seterusnya, kami menggunakan atribut yang dikira untuk menentukan atribut yang dikira yang dipanggil url, yang mengira URL secara dinamik berdasarkan atribut postId. Dalam sintaks sifat yang dikira, kami menggunakan templat rentetan ES6 untuk memasukkan postId ke dalam rentetan URL.

Akhir sekali, dalam kaedah mounted(), kami memanggil kaedah fetchData() dan lulus url sifat yang dikira sebagai parameter kepada kaedah tersebut.

Menggunakan Pendengar

Selain sifat yang dikira, kami juga boleh menggunakan pendengar dalam Vue untuk menukar URL secara dinamik dalam kaedah.

Kedengarannya kuat, tetapi sebenarnya, menggunakan pendengar Vue juga sangat mudah. Kami hanya perlu mentakrifkan pendengar dalam contoh Vue Apabila nilai postId berubah, pendengar ini akan dicetuskan. Dalam pendengar, kita boleh memanggil semula kaedah fetchData() dan menghantar URL baharu yang dikira sebagai parameter kepada kaedah tersebut.

Berikut ialah contoh kod:

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

Dalam contoh di atas, kami mula-mula mengalih keluar atribut url daripada data dan menambah atribut postId pada data. Kami juga mengubah suai kaedah fetchData() untuk menerima url sebagai parameter.

Seterusnya, kami menggunakan atribut jam tangan untuk mentakrifkan pendengar bernama postId, yang dipanggil apabila postId berubah. Dalam pendengar, kami mula-mula memasukkan postId ke dalam rentetan URL dan kemudian mengambil semula data menggunakan kaedah fetchData().

Akhir sekali, dalam kaedah mounted(), kami memanggil kaedah fetchData() dan lulus postId sebagai parameter kepada kaedah tersebut.

Ringkasan

Dalam artikel ini, kami menunjukkan cara menukar URL dalam kaedah secara dinamik melalui contoh aplikasi Vue. Kami mempelajari cara menggunakan sifat dan pendengar yang dikira untuk memantau perubahan dalam data Vue dan menghantar permintaan HTTP dengan URL yang diubah.

Walaupun menukar URL secara dinamik dalam JavaScript adalah keperluan biasa, dalam Vue kami boleh melakukannya dengan mudah dengan teknik seperti sifat dan pendengar yang dikira. Teknologi ini memudahkan untuk mengendalikan set data yang kompleks dan dinamik sambil meningkatkan responsif dan kebolehpercayaan aplikasi web.

Atas ialah kandungan terperinci vue menukar url dalam kaedah secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!