Vue 3: Can not access Object key of Object by props (in brackets)

Question

Actually I try to access a method of a class, but I have the problem as well with an Object. From the parents prop "formMethod" comes the string "makeUserSignInForm".

Now in the child, I can not access with it the object directur ...

<script lang="ts" setup>
  // PROPS
  const props = defineProps({
    formMethod: {
      type: String,
      required: true,
      // default: false,
    },
  });


  const directur = {
    makeUserSignInForm: 'Hello',
  };

  const accessor = JSON.parse(JSON.stringify(props.formMethod));

  console.log(directur); // logs the object.
  console.log(accessor); // makeUserSignInForm

  // WHY does this works
  console.log(directur.makeUserSignInForm); // Hello

  // And this
  console.log(directur['makeUserSignInForm']); // Hello

  // BUt not this?!
  console.log(directur[accessor]); // undefined

</script>

Answer 1

When using a string it works in the below snippet. Are you sure the JSON.parse(JSON.stringify(props.formMethod)) is returning "makeUserSignInForm" as a string?

const directur = {
    makeUserSignInForm: 'Hello',
};

// const accessor = JSON.parse(JSON.stringify(props.formMethod));
const accessor = "makeUserSignInForm";

console.log(directur); // logs the object.
console.log(accessor); // makeUserSignInForm

console.log(directur.makeUserSignInForm); // Hello

console.log(directur['makeUserSignInForm']); // Hello

console.log(directur[accessor]); // Hello