代码之家 › 专栏 › 技术社区 › Paul Allsopp

新的Laravel/VueJS开发人员缺少一点基本的理解

inertiajs vue.js laravel

0

Paul Allsopp · 技术社区 · 3 年前

我正在尝试创建一个简单的应用程序来学习VueJS的Laravel。我用InertiaJS创建了一个JetStream示例应用程序,但似乎陷入了一些可能与根本误解有关的问题。

我在导航部分添加了一个链接,该链接呈现了一个Vue组件,该组件使用GridJS显示所有用户的列表。现在,当我检查Chrome的DevTools Network选项卡时,请求似乎路由正确,但页面中的模板没有添加到DOM中。我在同一个文档中有一些JS,它得到了一个链接挂钩,然后它用它来查找querySelector,但没有找到它。链接在同一文件中,但在一个模板块中,所以模板块的内容显然没有添加到DOM中。

这是我的路线:

Route::get('/user/view', function() { 
    return Inertia::render('UserList'); 
})->name('user.view');

这是我的Vue组件(仅相关部分):

<template>
    <div class="row">
        <div class="col-lg-12">
            <div js-hook-url="{{ route('user/view') }}" js-hook-table-users></div>
        </div>
    </div>
</template>

<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

const USER_TABLE = '[js-hook-table-users]'
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute('js-hook-url');

因此,错误发生在最后一行,因为DOM中不存在该节点,因此querySelector没有拾取该节点,所以getAttribute在null时被调用。同样,我确信这是一个对拉拉威尔和武来说是新的基本问题。TIA

0 回复 | 直到 3 年前