: Auf die Eigenschaft „text“ wurde beim Rendern zugegriffen, sie ist jedoch nicht in der Pug-Instanz definiert

Question

Ich bin neu bei Vue und versuche, eine Ansicht zu erstellen, die Code verwendet, um die E-Mail zu überprüfen, nachdem sich jemand angemeldet hat. Ich habe derzeit nur Ansichten und nichts, um eine Verbindung zur E-Mail herzustellen oder Code zu generieren. Ich verwende Pug, Typescript und SCSS in diesem Vue-Projekt. Ich weiß, dass dieses Problem normalerweise auf Tippfehler zurückzuführen ist, aber ich kann es nicht finden. Idee?

.vue-Datei:

<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-Datei:

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 };
}

Vielen Dank im Voraus!

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,
  };
}