[Vuejs]-Vue.js v-bind:value not dsplaying the value

by

1đź‘Ť

You want the submit button to be labeled “mike@example.com”?

… then you can use an input element (type=”submit”) and give it a value:

<input type="submit" v-bind:value="email" class="btn btn-primary" />

…or you use a button then you have to put the text to display between the opening and closing tags

<button type="submit" class="btn btn-primary">{{email}}</button>

Also note the data-attribute in vue should be a method not an object (read more here):

  data() {
    return {
      email: 'mike@example.com'
    }
  }

0đź‘Ť

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="app">
        <button >{{email}}</button>
        <input type="submit" :value="email">
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script >
    new Vue({
            el: '#app',
            data: {
                email: 'mike@example.com',
            }
        });
</script>
</body>
</html>

Leave a comment