Блог

Главная - Вопросы по программированию - В компонентах Vue, смонтированных: {this.init()}, выдает ошибку: неожиданный токен, ожидаемый {

В компонентах Vue, смонтированных: {this.init()}, выдает ошибку: неожиданный токен, ожидаемый {

#javascript #vue.js #vue-cli #echarts

#javascript #vue.js #vue-cli #электронные диаграммы

Вопрос:

При объединении Vue и электронных диаграмм я написал это в src /components/Chart.vue:

 <script>
export default {
  name: 'Charts',
  data () {
    return {
      chart: ''
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  mounted: {this.init()},
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.charts.setOption(this.option)
    }
  }
}
</script>

И при запуске npm run dev он выдал это:

  ERROR  Failed to compile with 1 errors                                                   22:51:02

 error  in ./src/components/Chart.vue

Syntax Error: this is a reserved word (57:12)

  55 |     }
  56 |   },
> 57 |   mounted: {this.init()},
     |             ^
  58 |   methods: {
  59 |     init () {
  60 |       this.chart = this.$echarts.init(document.getElementById(this.id))



 @ ./src/components/Chart.vue 4:0-105 5:0-118
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Я много гуглил, но не нашел ответа. Я был бы очень признателен, если бы кто-нибудь мог меня просветить.

Комментарии:

1. Это просто недопустимый синтаксис. Что вы пытаетесь там сделать? У вас есть определение свойства с использованием инициализатора объекта («литерал объекта»), и вызов функции сам по себе недопустим в теле инициализатора объекта.

Ответ №1:

mounted должна ссылаться на литерал функции, поэтому попробуйте это

mounted: function() { this.init() }

Ответ №2:

То же, что вы сделали с данными, смонтированной должна быть функция:

 mounted () {
    this.init()
},