来自ajax请求的Vue.JS路由器链接参数

Posted 2023-02-22

【中文标题】来自ajax请求的Vue.JS路由器链接参数

【英文标题】：Vue.JS router-link params from ajax request

【发布时间】：2019-04-20 02:25:36

【问题描述】：

我试图用 vue 创建一个路由器链接，当我尝试传递一个参数时，我使用 axios 从 AJAX 请求中收到。但是在我加载页面的那一刻，我得到了参数丢失的通知，它显示为未定义。我该如何解决这个问题？

<tr v-for="obj in fetched">
    <td v-text="obj.isocode"></td>
    <td v-text="obj.name"></td>
    <td><router-link :to=" name: 'str-route-masterdata-country-edit', params:  id: obj.id ">Edit</router-link></td>
</tr>

---

export default 
        name: "starlight-masterdata-country-index",
        components: StarlightTable,
        data: function() 
            return fetched: []
        ,
        mounted: function () 

            let vm = this;

            Axios.get('http://127.0.0.1:5000/masterdata/countries',
                crossDomain: true
            )
                .then(function (response) 
                    // handle success
                    vm.fetched = response.data;
                )
                .catch(function (error) 
                    // handle error
                    //TODO: Add flash message to screen to show the api request failed
                    window.console.log(error);
                );
        ,

    

错误信息：

vue-router.esm.js?8c4f:16 [vue-router] missing param for named route "str-route-masterdata-country-edit": Expected "id" to be defined

【问题讨论】：

从 axios 收到的结构是什么样的？您的模板需要 [id:123] 这样的内容吗？

错误信息到底是什么：i get the notice the parameter is missing

@MattMorgan 我已经编辑了帖子以包含 chrome 控制台给我的确切错误消息。我很抱歉。

@ssc-hrep3 谢谢，我不小心用了 id 而不是 uuid。对我来说只是一个坏事

【参考方案1】：

已经解决了。使用了错误的属性。需要是 uuid 而不是 id..