Javascript + Vue issue: 'Cannot read property 'value' of null'

Question

Below I have an input which value I attempt to assign to a variable v. My understanding after reading similar posts is that, when the page is initialized, the value of the input is null and thus cannot be read.

<template>
  <div>
    <input type="text" id="input"/>
    {{ v }}
  </div>
</template>

<script>
export default {
  data(){
    return { v: document.getElementById("input").value }
  },
}
</script>

Two questions immediately pop up:

Why doesn't v: null cause an error? Would it not be equivalent to the code above?
What is the correct way to assign the value of the input to a variable?

you should use v-model instead: vuejs.org/guide/components/v-model.html — Damzaky
– Damzaky, Commented Dec 3, 2023 at 13:15

Naren · Accepted Answer · 2023-12-03 13:39:08Z

1

Because DOM isn't available in the data function. Use mounted to access the DOM. If you want two way binding, use v-model

From docs

It is not recommended to return objects with their own stateful behavior like browser API objects and prototype properties. The returned object should ideally be a plain object that only represents the state of the component.

<template>
      <div>
        <input type="text" id="input" v-model="v" />
        {{ v }}
      </div>
    </template>

    <script>
    export default {
      data(){
        return { v: null }
      },
    }
    </script>

edited Dec 3, 2023 at 13:39

answered Dec 3, 2023 at 13:33

Naren

4,5293 gold badges20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Javascript + Vue issue: 'Cannot read property 'value' of null'

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related