：屬性「text」在渲染期間被訪問，但未在 Pug 實例上定義

Question

我是 vue 新手，正在嘗試建立一個視圖，在有人註冊後使用程式碼驗證電子郵件。我目前只有視圖，沒有任何內容連接到電子郵件或生成程式碼。我在這個 vue 專案中使用 pug、typescript 和 scss。我知道這個問題通常是因為拼字錯誤，但我找不到。想法？

.vue 檔案：

<template lang="pug">
.Verify
  .Verify__focus
    .Verify__title Verify Your Email
    .Verify__form
      .Verify__field
        va-input.Verify__textInput(
          type="text",
          name="verificationCode",
          placeholder="Verification Code",
          v-model="text",
          @keyup.enter="verifyUser()"
        )
          template(v-slot:prependInner="")
            va-icon(name="check_circle")

        .Login__buttonRow
          va-button.Login__submitButton(@click="verifyUser") Verify
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import useVerify from "@/views/Signup/Verify/useVerify";

/**
 * Assemble the Verify reactivity.
 *
 * @returns Data for the component to use.
 *  - verificationCode: verification code the user is sent
 *  - verifyUser: function to call to carry out the verification operation.
 */
function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  return {
    verificationCode,
    verifyUser,
  };
}

export default defineComponent({
  name: "Verify",
  setup,
});
</script>

<style lang="scss">
.Verify {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &__focus {
    width: 360px;
    max-width: 95vw;
  }

  &__field {
    padding-bottom: 0.5em;
  }

  &__buttonRow {
    display: flex;
    justify-content: flex-end;
  }

  &__title {
    font-size: 1.2em;
    padding-bottom: 0.5em;
    text-align: center;
  }
}
</style>

.ts 檔案：

import { Ref } from "vue";
import { useApolloClient } from "@vue/apollo-composable";
import { ValidatedUser } from "@/models";
import { gql } from "graphql-tag";

const query = gql`
  query Verify($input: Verify) {
    Verify(input: $input) {
      __typename
      token
      user {
        email
        id
      }
    }
  }
`;

/**
 * Retrive apollo client and provide useVerify
 * function to validate input and execute Verify process.
 *
 * @param verificationCode - reactively wrapped email address of the user signing up.
 * @returns useVerify composition functionality.
 */
export default function useVerify(verificationCode: Ref<string>): {
  verifyUser: () => Promise<void>;
} {
  const { resolveClient } = useApolloClient();
  /**
   * Execute the Verify process for the given verification code.
   */
  async function verifyUser(): Promise<void> {
    if (verificationCode.value !== "123456") {
      return;
    }
    else{
      console.log("worked");
      //TODO: auth here
    }
    const client = resolveClient();

    const variables = {
      input: { username: verificationCode.value },
    };
    const response = await client.query({ query, variables });
    const validatedUser: ValidatedUser = response.data.Verify;
    console.log("USER:", validatedUser);
    console.log("verificationCode: ", variables);
  }
  return { verifyUser };
}

提前致謝！

Answer 1

似乎這一行觸發了模板中的錯誤

....
      .Verify__field
        va-input.Verify__textInput(
          type="text",
          name="verificationCode",
          placeholder="Verification Code",
          v-model="text",     //<---------------This one
          @keyup.enter="verifyUser()"
        )


....

原因是您在設定函數中沒有傳回名為 text 的變數

function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  return {
    verificationCode,
    verifyUser,         //no text property here
  };
}

您可能需要定義這樣的文字屬性

function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);
  const text = ref("");


  return {
    verificationCode,
    verifyUser,
    text,
  };
}