从父方法访问组件方法

时间:2017-11-27 08:21:32

标签: javascript vue.js

我试图找出如何从父方法<img>触发我的组件元素addPhoto()上的点击事件,以便运行openUploader()方法。< / p>

我想在将新项目推送到photos后打开文件上传器。

之后:this.photos.push(newPhoto);

接近尝试#1:

我试图这样做this.openUploader(),我知道这不起作用,因为方法不存在。如何访问“newPhoto”,以便我可以执行以下操作:this.newPhoto.openUploader()。我尝试在v-model上添加<img>,但它不起作用。

接近尝试#2:

Vue是否有类似这样的方法:<img {{ clickThis() : openTheUploader }} >

我知道怎么做/通过遍历DOM使用vanilla JS / jQuery点击它,但我想知道这是否可能在Vue JS(我想是的),我只是不知道如何做到这一点。

Vue.component('gallery', {
    template: '<div><img v-bind:src="photo" v-on:click="openUploader()" alt="Blank Photo" /><input type="file" ref="photoUploader"></div>',
    props: ['photo'],
    methods: {
        openUploader: function(){
        
           this.$refs.photoUploader.click();
                
        }
    }
});

var photoGallery = new Vue({
    el: '#photoGallery',
    data: {
        photos: [
                   { 
                     'id'   : 1,
                     'photo': 'https://vuejs.org/images/logo.png'
                   }
                ]
    },
    methods: {
        addPhoto: function(){
        
          var newPhoto = [
                          {
                            'id'   : 2,
                            'photo': ''
                          }
                       ];
          this.photos.push(newPhoto);
          // I want to open file uploader of new blank photo here
        
        }
    }
});
[type="file"]{
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="photoGallery">

  <gallery v-for="(photo, index) in photos"
           v-bind:key="photo.id"
           v-bind:photo="photo.photo"></gallery>
  <button v-on:click="addPhoto()">
    Add Photo
  </button>

</div>

0 个答案:

没有答案