[Vue 警告]：在渲染期间访问了属性“文本”，但未在 Pug 实例上定义

Question

我是 vue 新手，我正在尝试制作一个视图，在 somone 注册后使用代码验证电子邮件。我目前只有视图，没有任何东西连接到电子邮件或生成代码。我在这个 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,
  };
}