Question

我试图找出如何从父方法<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 个答案: