CODEWITHSUNDEEP
javascriptvue.jsstatic
jx3
jx3

Reputation: 961

vue.js computed method returned in backticks not being parsed in template

I've been following this vue.js tutorial:

https://youtu.be/h6lhOYv-QM4?t=1m56s

But have run into a strange issue early on. I'm using a static setup with a standard index.html file and app.js file.

Here's the JS:

const app = new Vue({
  el: "#app",
  data: {
      bobby: {
          first: 'Bobby',
          last: 'Boone',
          age: 25
      },
      john: {
          first: 'John',
          last: 'Boone',
          age: 35
      }
  },
  computed: {
    bobbyFullName() {
        return `$(this.bobby.first) $(this.bobby.last)`
    },
    johnFullName() {
        return `$(this.john.first) $(this.john.last)`
    }
  },   
  template: `
    <div>

        <h3>Name:  {{ bobbyFullName }}</h3>
        <h3>Age:   {{ bobby.age }}</h3>

        <h3>Name:  {{ johnFullName }}</h3>
        <h3>Age:   {{ john.age }}</h3>

    </div>
    `
});

Expected output:

Name: Bobby Boone
Age: 25
Name: John Boone
Age: 30

Actual output:

Name: $(this.bobby.first) $(this.bobby.last)
Age: 25
Name: $(this.john.first) $(this.john.last)
Age: 30

Idea

Could it be because they're using a local server in the tutorial, whereas I have a static setup?

(Or is it an ES6 thing? I know backticks are part of ES6, but they don't appear to put anything in place for ES6 in the tutorial. The only difference I can see is the local server.)

It works if I don't use backticks:

 computed: {
    bobbyFullName() {
        return this.bobby.first + ' ' + this.bobby.last
    },
    johnFullName() {
        return this.john.first + ' ' + this.john.last
    }
  },

Upvotes: 1

Views: 4177

Answers (3)

Mohammed Ahmed
Mohammed Ahmed

Reputation: 435

The problem is in :

    bobbyFullName() {
        return `$(this.bobby.first) $(this.bobby.last)`
    },
    johnFullName() {
        return `$(this.john.first) $(this.john.last)`
    }

It should be:

    bobbyFullName() {
        return `${this.bobby.first} ${this.bobby.last}`
    },
    johnFullName() {
        return `${this.john.first} ${this.john.last}`
    }

Upvotes: 0

r0ulito
r0ulito

Reputation: 487

The mistake is that you are use parenthesis "()" instead of curly brackets "{}"

Try :

bobbyFullName() {
        return this.bobby.first + ' ' +  this.bobby.last
    }

Or :

bobbyFullName() {
        return `${this.bobby.first} ${this.bobby.last}`
    }

Upvotes: 3

Patrick Hollweck
Patrick Hollweck

Reputation: 6665

Javascript template strings use {} and not ()

So the correct code would be:

computed:{
    bobbyFullName() {
       return `${this.bobby.first} ${this.bobby.last} `
    },
    johnFullName() {
      return `${this.john.first} $  {this.john.last} `
    }
},

Upvotes: 0

Related Questions