CODEWITHSUNDEEP
javascriptvue.js
Chadere Oghenenyoreme
Chadere Oghenenyoreme

Reputation: 83

In Vue.js I cant use this.(nameOfObject) to bind data

I've tried using a return function in VueJS methods to return what is in Vue instance.

This is my code, but it doesn't show anything in the browser:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<div id="app">
  <input type="text">
  <h1>{{ sayHello() }}</h1>
</div>

<body>

  <script>
    new Vue({
      el: '#app',
      data: {
        title: "Hello world!"
      },
      methods: {
        sayHello: () => {
          return this.title;
        }

      }

    });
  </script>
</body>

</html>

Upvotes: 2

Views: 42

Answers (1)

Chadere Oghenenyoreme
Chadere Oghenenyoreme

Reputation: 83

Ok so I found A way to do this. I noticed that Vue js doesn't support arrow functions so to do what I wanted to do, changed the arrow functions to the normal function with a function keyword like this :

<!DOCTYPE html>
<html>

<head>
    <script src="vue.js"></script>
</head>

<div id="nyore">
    <input type="text">
    <h1>{{ sayHello() }}</h1>
</div>

<body>

    <script>
        new Vue({
            el: '#nyore',
            data: {
                title: "Hello world!"
            },
            methods: {
                sayHello: function() {
                    return this.title;
                }
            }

        });
    </script>
</body>

</html>

Upvotes: 1

Related Questions