国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何在VueJS中的router-link中傳遞URL參數(shù)
P粉930448030
P粉930448030 2023-12-19 10:56:30
0
1
696

我正在嘗試從 VueJS 中的 Trackers 頁面向 '/trackers/:id/Update' 或 '/trackers/:id/Delete' 發(fā)送請求,問題是我的 id 位于一個名為 items 的數(shù)據(jù)中我正在從我的 API 獲取并將其存儲在本地以供顯示,我需要在目標 URL 中獲取 {{item.trackerid}},即“/trackers/:id/Delete”。我找不到辦法。有人可以告訴我正確的路徑嗎?

TrackersView.vue:

<template>
    <h1>Hello {{name}}</h1>
    <h3>This is your Trackers page</h3>
    <table class="table table-striped">
  <thead>
    <th>Sno</th>
    <th>Tracker name</th>
    <th>Tracker Description</th>
    <th>Tracker settings</th>
    <th>Date Created</th>
    <th>Add tracker log</th>
    <th>Actions</th>
  </thead>
  <tbody>
<tr v-for="item,index in items" :key="index">
                <th>{{index}}</th>
                <th>{{item.trackername}}</th>
                <th>{{item.trackerdesc}}</th>
                <th>{{item.tracker_settings}}</th>
                <th>{{item.datecreated}}</th>
                <th><button class="btn btn-outline-dark">+</button></th>
                <th><button class="btn btn-outline-dark"><router-link :to="{ name: 'tupdate', params : {id : localStorage['id'] } }" style="text-decoration:none; color: black;">Update</router-link></button>
                </th>
                <th>  <button class="btn btn-outline-dark">  <router-link to="/trackers/{{item.trackerid}}/Delete" style="text-decoration:none; color: black;">Delete</router-link></button></th>
                
            </tr>
  </tbody>
</table>


<button class="btn btn-outline-dark" @click="createtracker">Click to add trackers</button>
</template>

<script>
import { useRouter } from 'vue-router';
import axios from 'axios';
export default {
Name: 'TrackersView',
mounted() {
    let id = localStorage['id'] 
    return{
        id,
    }
},
data() {
    return {
        name: localStorage.name,
        items : [],
        
    }
},
methods:{
  getTrackers(){
    const path = 'http://localhost:5000/trackers/'+ localStorage['id'] 
    axios.get(path)
    .then((res) => {
      this.items = res.data.tracker
  })
 
    .catch((err) => console.log(err.response))

    console.log(this.items);
  }
},
setup() {
  const router = useRouter();
  const createtracker = async () => {
    await  router.push({name: 'createtracker',params : {id : localStorage['id']}});
    };
    return{
        createtracker,
    }
},
created() {
  this.getTrackers();
}
}
</script>

<style scoped>
    body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
  }
  
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>t

最終結(jié)果是這樣的:

這是 localStorage 中的內(nèi)容:

P粉930448030
P粉930448030

全部回復(1)
P粉106301763

當前路線的查詢位于 this.$route.query 中,如果您想將其保留在目的地中,您可以將整個查詢對象傳遞到另一個路線:

<router-link


:to="{ path: '/', query: $route.query }"
>
  Go There
</router-link>

如果您只想傳遞特定的查詢參數(shù):

<router-link
  :to="{ path: '/', query: { myQuery: $route.query.myQuery }}"
>
  Go There
</router-link>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板