Vue js does not bind values to form-CodePudding

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: '[email protected]',
                    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)?

CodePudding user response：

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/[email protected]/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: '[email protected]',
      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>

CodePudding user response：

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.