Форма входного файла Vuejs - PullRequest
Новая
       6

Форма входного файла Vuejs

0 голосов
/ 31 января 2019

В моем приложении vue-bootstrap я хотел бы использовать скрытый контроль входного файла.Когда я использую стандартный компонент ввода, он работает (Load 1).Если я пытаюсь сделать то же самое с библиотекой vue-bootstrap реактивного компонента, это не сработает (Загрузить 2).Буду признателен за любые намеки, что я могу делать неправильно. 

app = new Vue({
  el: "#app",
  data: {
    files: '',
  }
})
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
      <input type="file" ref="fileInput1"  style="display:none;"/>
    </div>
    <div>
      <b-button @click="$refs.fileInput2.click()"> Load 2</b-button>
      <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
    </div>
  </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 31 января 2019

$refs.fileInput2 здесь относится к компоненту Vue, а не к элементу input, который фактически обернут внутри div (вы можете увидеть это, если осмотрите визуализированный элемент).Итак, одна вещь, которую вы могли бы сделать (хотя это некрасиво и не рекомендуется, вы должны по крайней мере переместить это в раздел methods): 

app = new Vue({
  el: "#app",

  data: {
    files: '',
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
    <input type="file" ref="fileInput1" style="display:none;" />
  </div>

  <div>
    <b-button @click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
    <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
  </div>
</div>

Хотя я бы сказал, что вы должны просто использовать собственный элемент ввода файла, поскольку вы все равно скрываете <b-form-file/>.

0 голосов
/ 31 января 2019

Работает нормально. Вы можете проверить приведенную ниже скрипку.https://jsfiddle.net/tyagdvm5/

<b-form-file style="display:none;"  v-model="file2" choose-label="Attachment2"></b-form-file>

Или для точного решения, пожалуйста, создайте скрипку и загрузите ссылку.

...