追加到现有路由 JS 和 Laravel

Question

我正在尝试使用 JS 附加到现有的 Laravel 路由，而无需构建 URL 对象。

我的路线在下面的 HTML 元素中。

<div class="clickable-element js-location-id" data-href="{{ route('report.file.list')}}">DATA</div>

这是我构建新 URL 的 JS 函数。目前，新的 URL 是硬编码的，但我更喜欢从 html 元素中获取现有路由并将 id 附加到它，所以如果我更新路由，我不需要更新 JS。

buildTileFilter(){
        //Can I grab the route from the html element without having to create a url?
        let url = new URL('http://sample_site/report/file/list?f%5B%5D');
        let query_string = url.search;
        let search_params = new URLSearchParams(query_string);
        search_params.set('f[]', this.locationId);
        url.search = search_params.toString();
        let new_url = url.toString();
        return new_url;
    }

Answer 1

所以你是想把 data 属性的值放到 JS 函数中？

你可以使用 vanilla JS 从元素中检索值。

因此，如果您在元素上有一个 ID，则可以使用 document.getElementByID('the-ID-of-the-element').dataset('href');

Answer 2

如果 JS 在刀片模板文件中，您也可以绕过创建元素以保存值的需要。您可以简单地使用刀片插值直接在代码中注入路线，如下所示：

buildTileFilter(){
    //Can I grab the route from the html element without having to create a url?
    let url = '{{route('report.file.list)}}';
    let query_string = url.search;
    let search_params = new URLSearchParams(query_string);
    search_params.set('f[]', this.locationId);
    url.search = search_params.toString();
    let new_url = url.toString();
    return new_url;
}