What is wrong with this basic computed data value using Vue2 JS?

Question

I have followed a tutorial online that uses computed data to output the first name and last name. My code is the same, but the rendered result is different. Presently, it is seeing what is after the $ as just a string and not the assigned data. https://screenshots.firefox.com/pDElTgV9EB58BjbS/127.0.0.1 What am I doing wrong?

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>
        <h1>Name: {{bobbyFullName}}</h1>
        <p>Age {{bobby.age}}</p>

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

    </div>
    `
})

Ana Liza Pandac · Accepted Answer · 2019-01-13 09:34:43Z

3

The JS template literal uses backticks and not single quotes.

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

edited Jan 13, 2019 at 9:34

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

answered Jan 13, 2019 at 9:01

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Al-76 Over a year ago

So the return part needs to use ` and not '. You need eyes of a hawk to see that youtu.be/h6lhOYv-QM4?t=108

Yom T. Over a year ago

Exactly, otherwise it's gonna be treated as normal strings.

Collectives™ on Stack Overflow

What is wrong with this basic computed data value using Vue2 JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related