2

clientHeight単一ファイル コンポーネントによって作成された vue インスタンスのプロパティにアクセスしようとしていますが、undefined が返されます。これどうやってするの？

<template lang='jade'>
  article#article.projectCard.relative.mb5.pa5( v-bind:style="styleObject")
    h3 {{ project.projectName }}
    p {{ project.projectDescription }}
</template> 

    <script>
    export default {
      props: {
        project: '',
      },

      data () {
        return {
          styleObject: {
            backgroundColor: this.project.projectMainColor,
            height: '80vh'
          },
          cardHeight: this.clientHeight,
        };
      },
</script>
4

1 に答える 1

2

要素を使用した後に要素にアクセスできるので、実際にはマウントした後に必要mountedになります。this.$elthis.$el.clientHeight

あなたは次のようにすることができます：

data () {
  return {
    cardHeight: 0,
  }
}

次に、次のようにします。

mounted () {
  this.cardHeight = this.$el.clientHeight + 'px'
}

また、それstyleObjectは計算されたプロパティとしてより良いでしょう。そうすれば、物事が変化すると自動的に更新されます。

私は個人的にやりたい：

data () {
  return {
    cardHeight: '80vh',
  }
},

mounted () {
  this.cardHeight = this.$el.clientHeight + 'px'
},

computed: {
  styleObject () {
    return {
      backgroundColor: this.project.projectMainColor,
      height: this.cardHeight,
    }
  }
}
于 2016-11-07T02:01:21.383 に答える