Vue framework binding

Question

Vue framework binding

Check out this code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>

<body>
    <div id="root">
        <input v-model="message" placeholder="Msg">
        <p>The message you typed is: {{ message }}</p>
    </div>
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8afcffefcab8a4bca4bbba">[email protected]</a>/dist/vue.js"></script>
    <script>

        new Vue({
            data: {
                el: '#root',
                message: ''
            }
        });
    </script>
</body>
</html>

Curious why the binding isn't working? I followed a tutorial here:

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/1 .

Appreciate any help. Thanks!

javascript vue.js

Answer 1

Answer №1

The key 'el' should be included in the object passed to the <code>Vue

constructor and not within the data object (Reference)

new Vue({
  el: '#root',
  data: {
    message: ''
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <input v-model="message" placeholder="Msg">
  <p>Message you typed is: {{message}}</p>
</div>

Answer 2

The key 'el' should be included in the object passed to the <code>Vue

constructor and not within the data object (Reference)

new Vue({
  el: '#root',
  data: {
    message: ''
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <input v-model="message" placeholder="Msg">
  <p>Message you typed is: {{message}}</p>
</div>

Answer 3

Answer №2

Creating a new Vue instance with the following structure:

new Vue({
    data: {
        el: '#root',
        message: ''
 }
});

This code block should be updated to:

new Vue({
    el: '#root',
    data: {
        message: ''
    }
});

Answer 4

Creating a new Vue instance with the following structure:

new Vue({
    data: {
        el: '#root',
        message: ''
 }
});

This code block should be updated to:

new Vue({
    el: '#root',
    data: {
        message: ''
    }
});

Answer 5

Answer №3

Your Vue object is not properly linked to the designated element.

    <script>
            new Vue({
                el: '#app',
                data: {
                    text: 'Greetings Earthlings!'
                }
            });
    </script>

Answer 6

Your Vue object is not properly linked to the designated element.

    <script>
            new Vue({
                el: '#app',
                data: {
                    text: 'Greetings Earthlings!'
                }
            });
    </script>

Vue framework binding

Answer №1

Answer №2

Answer №3

Similar questions

Alter the background color upon clicking using ng-click

Postman sends requests by utilizing AJAX and adhering to the same origin policy

The React.js .map function encountered an error while trying to map the results from Firebase

How can I protect my security_access_key in a React.js application?

Tips for retrieving a value from a callback function?

Guide to integrating an element-ui component within a vuetify component

Creating custom functions in jQuery and utilizing them within other functions

Acquire the content of a nested element using jQuery

Uncomplicating Media Queries in Styled Components with the Power of React.js and Material-UI

The google analytics tag is failing to function properly after implementing ajax on the

I am currently attempting to authenticate a user with passport.js, however, I am encountering an issue as the server is returning a status of 400 (Bad Request)

The data does not display when using ng-repeat in AngularJS

Creating a clone of a JavaScript object based on an already existing JavaScript object

JavaScript function defined by the user in Node.js

Using Javascript regex for extracting JSON string content including property values within HTML code

Please provide values in the input box, with each value separated by

Having trouble executing cucumber tests using protractor

"Effortless method of augmenting an array based on a specific identifier using

Swap all occurrences of an array within a given string with a different array

Does the Angular CanLoad guard only trigger once during the initial lazy load?