属性或方法“bind”未在实例上定义,但在呈现期间引用

时间:2017-07-07 13:48:34

标签: vuejs2

安装中的bind()方法正在工作,但是在按钮点击时通过挂载调用我没有工作我正在使用croppie的vue包装器。和vue2 有没有人知道我是否可以直接在模板中使用这个。$ refs.croppieRef.bind()?

<script>
// import Vue from 'vue'
// import VueCroppie from 'vue-croppie'
// Vue.use(VueCroppie)
export default {
    mounted () {
      console.log('hojhojoh')
      this.$refs.croppieRef.bind({
        url: 'http://i.imgur.com/fHNtPXX.jpg'
      })
      this.$refs.croppieRef.rotate(90)
      this.$refs.croppieRef.rotate(90)
      console.log('hojhojoh')
    },
  // bind () {
  //   console.log('yoyoyoyoy')
  // },
    data () {
      return {
        cropped: null,
        images: [
          'http://i.imgur.com/fHNtPXX.jpg',
          'http://i.imgur.com/ecMUngU.jpg',
          'http://i.imgur.com/7oO6zrh.jpg',
          'http://i.imgur.com/miVkBH2.jpg'
        ]
      }
    },
    methords: {
      bind () {
        console.log('hihihihi')
        this.croppie.bind({
          url: 'http://i.imgur.com/ecMUngU.jpg'
        })
      },
      crop () {
        this.$refs.croppieRef.result((output) => {
          this.cropped = output
        })
      },
      rotate: function (rotationAngle) {
        this.$refs.croppieRef.rotate(rotationAngle)
      }
    }
}
</script>

<template>
    <div>
      <vue-croppie
        ref=croppieRef
        resultType="base64"
        :enableOrientation="true">
      </vue-croppie>

      <img v-bind:src="cropped">

      <button v-on:click="bind()">Bind</button>
      <!-- Rotate angle is Number -->
      <button v-on:click="rotate(-90)">Rotate Left</button>
      <button @click="rotate(90)">Rotate Right</button>
      <button @click="crop()">Crop</button>
    </div>
</template>

0 个答案:

没有答案