: La propriété 'text' a été accédée lors du rendu mais n'est pas définie sur l'instance Pug

Question

Je suis nouveau sur vue et j'essaie de créer une vue qui utilise du code pour vérifier l'e-mail une fois que quelqu'un s'est inscrit. Je n'ai actuellement que des vues et rien pour me connecter à l'e-mail ou générer du code. J'utilise pug, typescript et scss dans ce projet vue. Je sais que ce problème est généralement dû à des fautes de frappe, mais je ne le trouve pas. idée?

Fichier .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>

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

Merci d'avance !

Answer 1

Il semble que cette ligne déclenche un bug dans le modèle

....
      .Verify__field
        va-input.Verify__textInput(
          type="text",
          name="verificationCode",
          placeholder="Verification Code",
          v-model="text",     //
La raison est que vous ne renvoyez pas de variable nommée text dans votre fonction de configuration
function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  return {
    verificationCode,
    verifyUser,         //no text property here
  };
}
Vous devrez peut-être définir des propriétés de texte comme celle-ci
function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);
  const text = ref("");


  return {
    verificationCode,
    verifyUser,
    text,
  };
}