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

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

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

如果您更喜欢使用连接。查找如何修改你的linters规则，例如这里是如何为eslint（我相信你正在使用）这样做。

ES6意外的字符串连接

1 个答案: