VueJS-输入文件不会触发浏览器（在click（）上未定义）

Question

我正在编写一个自定义文件上传器，当我想触发不显示的文件浏览器时，执行console.log，我发现click（）函数的定义未定义。 我探索了不同的解决方案，但没有得到任何积极的结果。 这是代码：

HTML：

public class EfRepository<T> : IRepository<T>, IAsyncRepository<T> where T : BaseEntity
{
    public T GetSingleBySpec(ISpecification<T> spec)
    {
        return List(spec).FirstOrDefault();
    }
}

public class ProductSpecification : BaseSpecification<NewProducts>
{
    public ProductSpecification(string User)
    : base(b => b.User == User) //User = James
    {

    }
}

public class ProductService : IProductService
{
    public void getOrderProductDetails
    {
        var data = _productRepository.GetSingleBySpec(new ProductSpecification(user));
    }
}

JS：

<div v-b-tooltip.hover.bottom title="Load Photo">
    <input type="file" ref="fileInput" style="visibility:hidden" v-on:change="handleFilePreview"/>
    <div v-on:click="onFileChange">
        <div v-if="!image_url">
            <img class="img-size" src="../assets/profile.jpg"/>
        </div>
        <div v-else>
            <img class="img-size" src="image_url"/>
        </div>
    </div>
</div>

谢谢！