Property Or Method Not Defined In .vue File

Everything in my app was working perfectly fine until I began to add my javascript. Now I continuously get errors in the console. I get this error: Property or method 'show' is n

Solution 1:

You are using a Single-File Component (a .vue file), which is a file format for a Vue component definition used by vue-loader.

The script section of a .vue file (what's inside the <script> tag) should export an object specifying the definition of the Vue instance.

From the documentation:

The script must export a Vue.js component options object. Exporting an extended constructor created by Vue.extend() is also supported, but a plain object is preferred.

---

You are currently only exporting { name: 'app' }, which is why Vue can't find the show method.

Your <script> section should look like this:

<script>exportdefault {
    name: 'app',
    data() {
      return { n: 0 }
    },
    methods: {
      show: function(event) {
        targetId = event.currentTarget.id;
        alert('click')
      }
    }
  }
</script>

Note also that the data property of the object exported needs to be a function returning the data properties. See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.