Question

我有一个要触发的同级元素。

<b-img @click="callFileLoader"/>
<b-file type="file" ref="fileUploader"></b-file>
...

methods:{
  callFileLoader () {
    this.$refs.fileUploader.click()
  }
}

知道：未捕获的TypeError：this。$ refs.fileUploader.click不是函数

b-file documentation

Answer 1

经过一些调试后，我找到了一种使用此语句访问该输入的方法：

   this.$refs.fileUploader.$el.firstChild

这是<input>元素，可以点击。

new Vue({
  el: "#app",
  data() {
    return {
      file: null,
      file2: null
    }
  },
  methods: {
    callFileLoader() {

      this.$refs.fileUploader.$el.firstChild.click();

    }
  }

});

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" />

<div id='app'>

  <div>
    <!-- Styled -->

    <b-file v-model="file" ref="fileUploader" :state="Boolean(file)" placeholder="Choose a file..."></b-file>
    <div class="mt-3">Selected file: {{file && file.name}}</div>
    <button class="btn btn-primary" @click="callFileLoader">load</button>
  </div>
</div>

Answer 2

如果它是同级组件，则无法通过v-ref方法在同级组件中识别。如果没有嵌套的父组件，请尝试通过父组件或Vue根访问它：

 this.$root.$refs.fileUploader.click()

或在同级组件this.$root.$emit()中使用b-img来触发事件，并将事件侦听器放在events组件的b-file中以捕获发出的事件并触发{{1} }

因此在b-img中为：

click

，在methods:{ callFileLoader () { this.$root.$emit('file-uploader-click'); } }中将是：

b-file

您尝试将events:{ 'file-uploader-click' : function() { this.click(); } }放置在组件中，而不是放置事件方法：

VueTools chrome扩展名对于检查由VueJs生成的正确参考名称非常有用

通过this。$ refs从另一个vue.js组件调用方法

2 个答案: