js获取当前选择的对象

function show_modal3(thisobj) {
    var data = $table.bootstrapTable('getData');
    var index = $(thisobj).parent("li").parent("ul").parent("div").parent("button").parent("td").parent("tr").data('index');
    console.log("当前索引:"+index);
    var dict=data[index];
    var key="title";
    if(dict.hasOwnProperty(key)){
        var old_title=dict[key];
        console.log("标题为:"+old_title);
    }
    $("#old_title").val(old_title);
    $("#title_index").val(index);

    $('#myModal3').modal('show');
}
function capitalize(str) {
    if(true){
        var array = str.toLowerCase().split(" ");
        for (var i = 0; i < array.length; i++) {
            array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);

            //array[i][0] = array[i][0] + 'A' - 'a';
        }
        var string = array.join(" ");

        return string;
    }

}

$(function () {
    $("#update_title").click(function () {
        var new_title = $('#old_title').val();
        // console.log(new_title);
        new_title=capitalize(new_title);
        console.log(new_title);
        var title_index=$('#title_index').val();
        var data = $table.bootstrapTable('getData');
        var dict=data[title_index];
        if(dict.hasOwnProperty("title")){
            var old_title=dict["title"];
        }
        console.log(old_title)
        if (!new_title) {
            return 'This field is required';
            //为空无法关闭 输入文字才消失
        }else if(old_title==new_title){
            $('#myModal3').modal('hide');
        }else{
            if(dict.hasOwnProperty("product_id")){
                var product_id=dict["product_id"];
            }
            if(dict.hasOwnProperty("sku")){
                var sku=dict["sku"];
            }
            if(dict.hasOwnProperty("upload_user_id")){
                var user_id=dict["upload_user_id"];
                if(user_id==null){
                    if(dict.hasOwnProperty("store_id")){
                        user_id=dict["store_id"];
                    }
                }
            }
            $.ajax({
                type:"POST",
                dataType:"json",
                url:'/update_title/',
                data: {
                    "csrfmiddlewaretoken":document.getElementsByName('csrfmiddlewaretoken')[0].value,
                    "product_id":product_id,
                    "sku":sku,
                    "name":"title",
                    "old":old_title,
                    "new":new_title,
                    "userId":user_id,
            },
            success:function () {
                $('#myModal3').modal('hide');
            },error:function () {
                $('#myModal3').modal('hide');
            },
            // complete:function () {
            //     $('#myModal3').modal('hide');
            // }
        })
        }


    });

});
<think>嗯,用户的问题是关于在Vue3中使用JavaScript获取当前路由对象的方法。我需要先理解用户的具体需求。用户提到的是Vue3,并且希望用JavaScript而不是TypeScript,所以可能需要区分选项式API和组合式API的不同方法。 首先,我需要回忆一下Vue Router 4的文档,因为Vue3对应的是Vue Router 4版本。根据引用的资料,用户可能已经查阅了一些相关资料,比如引用[2]提到router.currentRoute是一个RefImpl对象,需要通过.value访问。引用[3]和[4]则提到了使用useRouter钩子来获取路由实例,然后通过currentRoute.value来访问当前路由信息。 接下来,用户可能需要的是具体的代码示例,以及不同情况下的使用方式。比如在选项式API中,如何通过this.$router来访问,或者在组合式API中使用useRouter。同时,用户可能还不太清楚如何在setup函数外使用,或者在JS文件中获取路由对象。 另外,需要注意Vue3中的一些变化,比如this的访问方式在组合式API中可能不再适用,所以需要提供替代方法。比如使用useRouter()代替this.$router,或者在选项式API中仍然可以使用this.$router.currentRoute.value。 可能还需要提醒用户关于RefImpl对象的处理,确保他们知道要使用.value来获取实际的值。同时,如果用户需要在JS模块中获取路由对象,可能需要导出router实例并在需要的地方导入使用。 最后,要检查是否有遗漏的情况,比如在模板中直接使用$router,或者如何处理响应式数据的变化。确保提供的代码示例正确,并且覆盖了常见的使用场景。</think>在Vue3中获取当前路由对象的方法主要有以下三种方式,根据不同的开发场景选择: ### 一、组合式API(setup语法) ```javascript import { useRouter } from 'vue-router'; // 在setup函数或script setup中使用 const router = useRouter(); console.log(router.currentRoute.value); // 获取当前路由对象 console.log(router.currentRoute.value.path); // 获取当前路由路径 console.log(router.currentRoute.value.params); // 获取动态路由参数 ``` ### 二、选项式API(传统Vue写法) ```javascript export default { mounted() { console.log(this.$router.currentRoute.value); // 通过this访问路由对象[^4] console.log(this.$route.path); // 简写方式获取路径(需注意版本差异) } } ``` ### 三、独立JS文件获取 若需要在普通JS模块中访问路由: ```javascript // router.js import { createRouter } from 'vue-router'; export const router = createRouter({...}); // other.js import { router } from './router'; console.log(router.currentRoute.value.fullPath); // 获取完整路径[^3] ``` #### 注意事项: 1. 通过`useRouter()`获取的是路由控制器实例,`currentRoute`需要`.value`访问[^2] 2. 路由参数更新时需使用watch监听: ```javascript watch( () => router.currentRoute.value, (newRoute) => { console.log('路由变化:', newRoute); } ) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值