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()函数中返回一个字符串值但是当我添加时+ ' ' + ....,我得到意外的字符串连接(prefer-template)错误.如果我回来this.user.firstName;就行了.我怎么回来this.user.firstName + ' ' + this.user.lastName;？

Answer 1

这是一个棉绒错误.从JavaScript的角度来看,没有任何内在错误this.user.firstName + ' ' + this.user.lastName;.但是,您的linter设置为在找到字符串连接时显示错误.只需使用模板字符串,因为它现在是首选方法.

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

如果您更喜欢使用串联.查找如何修改你的linters规则,例如这里是如何为eslint(我相信你正在使用).