Issue

This Content is from Stack Overflow. Question asked by memite7760

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:

And this is the expected result:

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)?

Solution

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>

This Question was asked in StackOverflow by memite7760 and Answered by Lissy93 It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.