Error when trying to add created method in Vue component

Question

Component

<template lang="html">
    <div class="chat-log">
        <chat-message v-for="message in messages" :message="message"></chat-message>
    </div>
</template>

<script>
    export default {
        props: ["messages"]
    }

</script>

<style lang="css">
    .chat-log .chat-message:nth-child(even) {
        background-color: #ccc;
    }
    .chat-log {
        overflow-y: auto;
        max-height: 400px;
    }

</style>

When I change the above script code to below. I get errors..

<script>
    export default {
        props: ["messages"]
    },
    created() {
        $(".chat-log").scrollTop($(".chat-log").prop('scrollHeight'));
    }

</script>

Error Details

Unexpected token, expected ;

Issue comes only when adding the created method, Am I missing anything?

Pankaj · Accepted Answer · 2018-02-13 15:06:35Z

1

The created lifecyle method goes within the body of the Vue component itself, not outside. I mean:

export default {
    props: ["messages"],
    created() {
        $(".chat-log").scrollTop($(".chat-log").prop('scrollHeight'));
    }
 }

Vue.js Lifecycle

edited Feb 13, 2018 at 15:06

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

answered Feb 13, 2018 at 14:59

P3trur0

3,2251 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj Over a year ago

I was actually looking for a method that executes once the component is fully loaded. but seems like created() will not help. can u suggest something?

P3trur0 Over a year ago

@Pankaj try to take a look here. I think you'd go with mounted.

samayo · Accepted Answer · 2018-02-13 15:01:30Z

1

Your created(){} method should be encapsulated within your export default {} block.

In other words, change your code this:

export default {

  props: ["messages"],

  created() {
   $(".chat-log").scrollTop($(".chat-log").prop('scrollHeight'));
  }

},

edited Feb 13, 2018 at 15:01

answered Feb 13, 2018 at 14:58

samayo

16.5k13 gold badges95 silver badges115 bronze badges

3 Comments

Pankaj Over a year ago

I was actually looking for a method that executes once the component is fully loaded. but seems like created() will not help. can u suggest something?

samayo Over a year ago

@Pankaj That is what created does, it will only run once, same as mounted(){}

samayo Over a year ago

Check this vuejs.org/v2/guide/instance.html#Lifecycle-Diagram maybe you are looking for beforeCreate()

Collectives™ on Stack Overflow

Error when trying to add created method in Vue component

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related