computed property can not be displayed

Question

i am learning how to use computed property. i created the below example and i would like to know please why the {{calculated}} does not display the value of this.name_

how to correct the below example so i works again

code:

<template>
  <div>computedProps:{{ calculated }}</div>
</template>

<script>
export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    const name_ = "ertz"
    const address_ = "aasf"
    const phone_ = "100 xx 50"
    return{
      name_,
      address_,
      phone_
    }
  },
  computed: {
    calculated:()=>{
      return this.name_.length
    }
  }
};
</script>

error:

35:14  error  'name_' is not defined  no-undef

Answer 1

This is an easy fix and it's because you are not completely understanding the this keyword. You need to use a method, not an arrow function.

computed: {
    calculated() {
      return this.name_.length
    }
  }