登录  /  注册
如何在VueJS中的router-link中传递URL参数
P粉930448030
P粉930448030 2023-12-19 10:56:30
[Vue.js讨论组]

我正在尝试从 VueJS 中的 Trackers 页面向 '/trackers/:id/Update' 或 '/trackers/:id/Delete' 发送请求,问题是我的 id 位于一个名为 items 的数据中我正在从我的 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

最终结果是这样的:

这是 localStorage 中的内容:

P粉930448030
P粉930448030

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号