无法获得包含 onMount 和 handleClick 函数的基本 <script> 以在 Sapper/Svelte 应用程序中运行客户端

问题描述

所以我觉得我缺少一些基本的东西，我希望我是。我正在 Sapper 中构建一个简单的站点。我正在使用 UIKit 进行样式设置和一些 JS（视差、滚动侦查的东西）。我也只是尝试在安装表单组件时写出到控制台，并在我单击该表单组件上的按钮时写出到控制台。显然我想要更复杂的功能，但我没想到会在这一步上挂断。

我在 svelte:head 中调用 UIKit 脚本和样式表，如下所示：

<svelte:head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="/uikit-3.6.17/css/uikit.css" />

<!-- UIkit JS -->
<script src="/uikit-3.6.17/js/uikit.min.js"></script>
<script src="/uikit-3.6.17/js/uikit-icons.min.js"></script>
</svelte:head>

然后我尝试在以下脚本标记中控制台记录内容：

<script>
  import { onMount } from "svelte";
  export let handleSubmit;
  handleSubmit = (event) => {
      console.log("button clicked");
    };

  onMount(() => {
    console.log("form mounted");
  });
</script>

在浏览器中，未记录“已安装表单”，并且未记录“单击按钮”。 handleSubmit 函数被绑定到一对按钮，表单组件被导入到 index.svelte。我在文档中看到 onMount is not called on a server side component，但我相当确定这个组件是客户端。可能是我不明白其中的区别。就 handleSubmit 函数而言，我觉得我已经通过 docs 正确实现了它。

我试过了：

在删除 svelte:head 部分的同时让标签运行，但没有运气。
从 form.svelte 上的标记中删除该函数，将其放入外部 .js 文件中，然后将该脚本作为新脚本导入 svelte:head 中，但没有成功。
在 onMount 中运行 handleClick 函数，但没有运气。
将 handleSubmit 重命名为 handleClick - 没有运气
%sapper.scripts% 确实存在于 template.html 文件中
开发网站看起来不错。

以下是包含无效脚本的完整 form.svelte 组件代码：

<svelte:head>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="/uikit-3.6.17/css/uikit.css" />

  <!-- UIkit JS -->
  <script src="/uikit-3.6.17/js/uikit.min.js"></script>
  <script src="/uikit-3.6.17/js/uikit-icons.min.js"></script>
</svelte:head>

<script>
  import { onMount } from "svelte";
  export let handleSubmit;
  handleSubmit = (event) => {
      console.log("button clicked");
    };

  onMount(() => {
    console.log("form mounted");
  });
</script>


<div
  uk-scrollspy="target: section; cls: uk-animation-slide-right-medium; delay: 250;"
>
  <section>
    <!--Section Title-->
    <h1 class="title" id="contact">Contact Me</h1>
    <!--Lead Text-->
    <p class="non-lead">
      Feel free to reach out to me at any time. My contact information is below,and you can also contact me using the web form below.
    </p>
    <table class="uk-table uk-table-justify uk-table-small">
      <thead>
        <tr>
          <th>Phone Number</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row-hover">
          <td>(215)-123-1234</td>
          <td
            ><a href="mailto:@gmail.com" class="link-item"
              ><span class="email-link" uk-icon="mail" /> gmail[at]gmail[dot]com</a
            >
          </td>
        </tr>
      </tbody>
    </table>

    <!--Contact Form-->
    <form class="uk-form-horizontal uk-margin-medium">
      <div class="uk-margin">
        <label class="uk-form-label" for="name">Full Name</label>
        <div class="uk-form-controls">
          <input
            class="uk-input"
            id="name"
            type="text"
            placeholder="First and Last name"
          />
        </div>
      </div>
      <div class="uk-margin">
        <label class="uk-form-label" for="email">Email Address</label>
        <div class="uk-form-controls">
          <input
            class="uk-input"
            id="email"
            type="email"
            placeholder="Email Address"
          />
        </div>
      </div>
      <div class="uk-margin">
        <label class="uk-form-label" for="phone">Phone Number</label>
        <div class="uk-form-controls">
          <input
            class="uk-input"
            id="phone"
            type="tel"
            placeholder="Phone Number"
          />
        </div>
      </div>
      <div class="uk-margin">
        <label class="uk-form-label" for="about">Tell Me About Yourself</label>
        <div class="uk-form-controls">
          <textarea
            rows="5"
            class="uk-textarea"
            id="phone"
            type="text"
            placeholder="Tell me a little about yourself..."
          />
        </div>
      </div>
    </form>
    <button on:click={handleSubmit} class="uk-button uk-button-primary"
      >Submit</button
    >
    <button on:click={handleSubmit} class="uk-button uk-button-danger"
      >Cancel</button
    >
  </section>
</div>

<style>
  * {
    margin: 0%;
    padding: 0;
    vertical-align: baseline;
  }

  section {
    z-index: 2;
    margin: 7% 2% 2% 2%;
  }

  .non-lead {
    max-width: 80ch;
    margin: 1em 0;
  }

  .title {
    max-width: 60ch;
    font-size: 2em;
    font-family: "Josefin Sans",sans-serif;
    font-weight: 300;
    letter-spacing: -2px;
    border-bottom: solid 4px rgba(170,185,173,0.75);
  }

  td {
    padding: 1.5% 1.5% !important;
  }

  .row-hover {
    background-color: #fff;
  }

  .row-hover:hover {
    color: #fff;
    background-color: #aab9ad;
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .row-hover:hover .email-link,.row-hover:hover .link-item {
    color: #fff;
  }

  .email-link,.link-item {
    color: black;
  }
</style>

这是导入的 index.svelte 页面：

<script>
  import Navbar from "../components/navbar.svelte";
  import Form from "../components/form.svelte";
  import Hero from "../components/hero.svelte";
  import MainContent from "../components/main_content.svelte";
  import Footer from "../components/footer.svelte";
</script>

<svelte:head>
  <title>Name</title>
</svelte:head>

<Navbar />
<main>
  <Hero />
  <section>
    <MainContent />
    <Form />
  </section>
</main>
<Footer />

<style>
  main {
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
  }
</style>

我在控制台中看到以下错误；但是无论我是否有问题，它都会出现在那里：

Error in Firefox Dev Edition Console

我目前将其保存在一个私人仓库中，但如果人们需要查看源代码，我可以将其公开。

谢谢，

-杰克

解决方法

Okey dokey，所以我设法解决了这个问题！我滥用了 svelte:head 属性。

我在 Sapper 应用程序的每个组件中都有 UIKit CSS 和脚本标签，所以我多次调用这些脚本和 css 样式表。我没有注意到这是问题所在，因为我只专注于解决组件的问题。

解决方案是删除

<svelte:head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="/uikit-3.6.17/css/uikit.css" />

<!-- UIkit JS -->
<script src="/uikit-3.6.17/js/uikit.min.js"></script>
<script src="/uikit-3.6.17/js/uikit-icons.min.js"></script>
</svelte:head>

从每个组件移动 UIKit 样式表和脚本到 template.html 文件。瞧！可以在 onMount 和 handleSubmit 期间使用 console.log！当然，我必须先向 Stack Overflow 提出问题。

sapper svelte-3

无法获得包含 onMount 和 handleClick 函数的基本 <script> 以在 Sapper/Svelte 应用程序中运行客户端

问题描述

解决方法

相关问答