javascript - 反引号中返回的 vue.js 计算方法未在模板中解析

Question

我一直在关注这个 vue.js 教程:

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

但是很早就遇到了一个奇怪的问题。我正在使用带有标准 index.html 文件和 app.js 文件的静态设置。

这是 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>
    `
});

预期输出:

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

实际输出:

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

想法

可能是因为他们在教程中使用的是本地服务器，而我使用的是静态设置？

(或者它是 ES6 的东西？我知道反引号是 ES6 的一部分，但它们似乎没有在教程中为 ES6 放置任何东西。我能看到的唯一区别是本地服务器。)

如果我不使用反引号，它会起作用:

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

Answer 1

错误是您使用的是括号“()”而不是大括号“{}”

尝试:

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

或者:

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