Vue2 JS를 사용하는 이 기본 계산 데이터 값은 어떤 문제가 있습니까?

Vue2 JS를 사용하는 이 기본 계산 데이터 값은 어떤 문제가 있습니까?

저는 온라인 튜토리얼에서 계산된 데이터를 사용하여 이름과 성을 출력하는 튜토리얼을 팔로우했습니다.내 코드는 같지만 렌더링된 결과가 다릅니다.현재 $ 뒤에 있는 것을 할당된 데이터가 아닌 문자열로 보고 있습니다.https://screenshots.firefox.com/pDElTgV9EB58BjbS/127.0.0.1 제가 뭘 잘못하고 있는 걸까요?

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>
    `
}) 

JS 템플릿리터럴에서는 단일 따옴표가 아닌 백틱을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/54167383/what-is-wrong-with-this-basic-computed-data-value-using-vue2-js