Vue.js | ReferenceError: Model property is undefined on input change

Question

The following Vue.js v3 component file :

// src/components/Unlock.vue

<script setup>
  import axios from 'axios'
</script>

<script>

  export default {
    data() {
      return {
        username:'',
        hash: ''
      }
    },

    methods: {
      unlock() {
        let username = this.username ? this.username.trim() : ''
        let hash = this.hash ? this.hash.trim() : ''
        if (username.length && hash.length) {
          axios.post('/unlock', { username, hash }).then(({ data }) => {
            this.$router.push(`/unlocked/${data.index}`)
          }).catch((error) => {
            console.error(error)
          })
        }
      }
    }
  }

</script>

<template>
  <div>
    <input v-model="username"
           type="text"
           placeholder="username">
    <br>
    <input v-model="hash"
           type="text"
           placeholder="redeem code">
    <br>
    <button type="button" @click="unlock">CLICK HERE TO UNLOCK</button>
  </div>
</template>

Is throwing the following Errors whenever I start typing in any of the two inputs:

index.e65df20f.js:1 Uncaught ReferenceError: username is not defined
    at HTMLInputElement.s.onUpdate:modelValue.a.<computed>.a.<computed> [as _assign] (index.e65df20f.js:1:3237)
    at HTMLInputElement.<anonymous> (vendor.7ec322db.js:1:53128)

and

index.e65df20f.js:1 Uncaught ReferenceError: hash is not defined
    at HTMLInputElement.s.onUpdate:modelValue.a.<computed>.a.<computed> [as _assign] (index.e65df20f.js:1:3237)
    at HTMLInputElement.<anonymous> (vendor.7ec322db.js:1:53128)

But I cannot spot what I'm doing wrong

You can replicate the problem on codesandbox.io

Remember to open your browser's console to see the errors as soon as you start typing in any of the inputs. They will not show up on the "console" of the sandbox GUI.

As @tao indicated to me in chat, the problem was due to the fact that I was using 2 <script> tags. If include all of my Js in 1 <script> tag in this particular view, the problem is gone. I don't know if this is the complete answer as I have other views with 2 <script> tags (but without user inputs) that don't have any problems. — user2272048
– user2272048, Commented Mar 22, 2022 at 1:29

tao · Accepted Answer · 2022-03-19 06:18:13Z

0

Do not instantiate reactive properties (e.g: username, hash) with undefined.

Instantiate with null (or whatever falsey value makes sense for that prop: empty array, 0, empty string, etc...).

In the above case, both reactive props should be instantiated with empty string:

data: () => ({
  username: '',
  hash: ''
})

If you instantiate with undefined, it's exactly as if you didn't declare it at all. Hence, your current error: you haven't actually declared either username or hash.

If you're using TypeScript, it's a very good idea to replace

export default {...}

with

import { defineComponent } from 'vue';
export default defineComponent({...})

edited Mar 19, 2022 at 6:18

answered Mar 18, 2022 at 15:53

tao

91.1k18 gold badges138 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2272048 Over a year ago

Your solution works but I don't understand why. I have another component file, where I don't need to import { defineComponent }... and where I also use data { .. } and it works with no errors (granted there are no inputs on that component). Also, the Vue 3 docs do not mention having to import { defineComponent }: vuejs.org/guide/essentials/…

tao Over a year ago

@Sprout, you don't need defineComponent in SFC's if you don't use TS. It adds type inference. But you must instantiate reactive props with something else than undefined. That's your "real" error.

user2272048 Over a year ago

Setting props to undefined works fine, as long as I use defineComponent. When I remove defineComponent, regardless of whether I use '' or undefined I start getting the error again. I'm not using TS, so I don't know what's happening.

user2272048 Over a year ago

I think my project is set to use Typescript just because I've installed vite I guess ? Even thought I'm not explicitly using Typescript anywhere in my code.. Do you know how can I completely disable Typscript ?

tao Over a year ago

@Sprout, no, Vite and TS work independently. If your main is .js, and you don't have a tsconfig.json, you're probably not using TS. If you want me to look further into this and tell you exactly what's the cause, I'd need to be able to repro. I suggest using codesandbox.io or similar, as it allows you to repro your configuration/files exactly. Also, I'm surprised to find out instantiating a reactive prop with undefined works. I'm fairly certain this wasn't the case a few versions back. Not sure about Vue3, but it definitely didn't work in Vue2.

|

Collectives™ on Stack Overflow

Vue.js | ReferenceError: Model property is undefined on input change

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related