ES6 意外的字符串连接

Question

<template>
<label>Firstname: </label><input type="text" v-model="user.firstName">
    <br/>
    <label>Lastname: </label><input type="text" v-model="user.lastName">
    <h3>{{fullName}}</h3>
</template>

<script>
export default {
    name: 'homepage',
    data() {
      return {
        title: 'Hello',
        user: {
          firstName: 'name',
          lastName: 'surname',
        },
        showName: false,
        items: [
          {
            title: 'Item one',
          },
          {
            title: 'Item two',
          },
          {
            title: 'Item three',
          },
        ],
      };
    },
    computed: {
      fullName() {
        return this.user.firstName + ' ' + this.user.lastName;
      },
    },
  };
</script>

我试图在 fullName() 函数中 return 一个字符串值，但是当我添加 + ' ' + .... 时，出现意外的字符串连接（首选模板）错误。如果我只是 return this.user.firstName; 就可以了。我怎样才能returnthis.user.firstName + ' ' + this.user.lastName;?

Answer 1

这是一个 lint 错误。 从 JavaScript 的角度来看 与 this.user.firstName + ' ' + this.user.lastName; 并没有本质上的错误。但是，您的 linter 设置为在发现字符串连接时显示错误。只需使用 template string 代替，因为它现在是首选方法。

`${this.user.firstName} ${this.user.lastName}`

如果您更愿意使用串联。查找如何修改您的 linters 规则，例如，这里是 eslint（我相信您正在使用）的修改方法。

ES6 意外的字符串连接

ES6 Unexpected string concatenation

string-concatenation

eslint

vue.js