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

user_2087077 0
Viewed 61

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>
    `
})
vuejs2 vue.js javascript
1 Answers

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}`;
    }
}
user_36345380
Related