Vue js does not bind values to form

memite7760 0
Viewed 37

I'm new to Vuejs but I'm trying to make a simple login form with it.

So I tried out this code:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div id="app">
            <form>
                <div>
                    <label for="email">Email:</label>
                    <input type="text" name="email" id="email" :value="email">
                </div>
                <div>
                    <label for="email">Password:</label>
                    <input type="password" name="password" id="password" :value="password">
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
        
        <script src="https://unpkg.com/vue@next"></script>
        <script>
        const App = {
            date(){
                return {
                    email: 'example@roocket.ir',
                    password: '123456'
                }
            }
        };

        Vue.createApp(App).mount('#app');
    </script>
    </body>
</html>

So as you can see I have used the CDN and successfully called the #app but I tried returning password and email values which are called from the script in the inputs however they are not shown in the form:

enter image description here

And this is the expected result:

enter image description here

And in the Console I get this:

vue@next:1616 [Vue warn]: Property "email" was accessed during render but is not defined on instance. 
  at <App>

vue@next:1616 [Vue warn]: Property "password" was accessed during render but is not defined on instance. 
  at <App>

So what's going wrong here?

How can I properly bind the input values from vuejs to the html (without using TwoWayBinding)?

binding vuejs2 vue.js javascript
2 Answers

Vue 2

Use v-model instead of value

Here's a working example:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  name: 'memite7760-demo',
  data() {
    return {
      email: '',
      password: '',
    }
  },
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>

<div id="app">
  <form>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" v-model="email">
    </div>
    <div>
      <label for="email">Password:</label>
      <input type="password" name="password" id="password" v-model="password">
    </div>
    <button type="submit">Submit</button>
  </form>
  <div>
  Username: {{ email }}, Password: {{ password }}
  </div>
</div>

Vue 3

As pointed out by @tao, you have a small typo: date should be data. He also gives some good advice re imports

Again, here's a working example:

const App = {
  data() {
    return {
      email: 'example@roocket.ir',
      password: '123456'
    }
  }
};

Vue.createApp(App).mount('#app');
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <form>
    <div>
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" v-model="email">
    </div>
    <div>
      <label for="email">Password:</label>
      <input type="password" name="password" id="password" v-model="password">
    </div>
    <button type="submit">Submit</button>
  </form>
  Email: {{email}}, Pass: {{password}}
</div>

Lissy930

The specific error you're getting is caused by misspelling the data() function to date(). This causes password and email to not be defined in your component.

That typo aside, you should follow @Lissy93's advice and use v-model instead of :value.
You might find form-input-bindings useful.

I'd also strongly advise not to use vue@next at this point. Replace it with vue.
vue@next used to point to Vue 3 when Vue 2 was the default version but now Vue 3 is the default version.
Your import might cause your app to break when Vue 4 comes out, as it's probably going to be published as vue@next, if Vue 4 has breaking changes across any features your app uses.

userx8W70
Related