Question

组件

<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>

当我将上面的脚本代码更改为以下内容时。我收到错误..

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

</script>

错误详情

意外的令牌，预期;

只有在添加创建的方法时才会出现问题，我错过了什么吗？

Answer 1

您的created(){}方法应封装在export default {}块中。

换句话说，请更改您的代码：

export default {

  props: ["messages"],

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

},

Answer 2

created生命周期方法属于Vue组件本身，而不是外部。我的意思是：

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

<强> Vue.js Lifecycle

尝试在Vue组件中添加创建的方法时出错

2 个答案: