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