vue.js - 文件上传后，输入值应在跨度值更改时更新

Question

上传图片文件后，我希望<input>'s 的值能体现我的<span>价值。但是，只有在我单击<a>标签后才会<input>更改其值，而不是<span>根据需要自动更改。

我希望<span>-change 更新<input>' 值。

<input
  v-model="data.filename"
  class="input"
  type="text"
  placeholder
  readonly
/>

<b-upload v-model="file">
  <span class="ss" v-if="file">{{ file.name }}</span>
  <a class="button is-orange has-text-white" @click="valuedata">
    <span>Upload</span>
  </a>
</b-upload>

export default {
  data() {
    return {
      file: null,
      data: {
        filename: ''
      },
    }
  },
  methods: {
    valuedata() {
      this.data.filename = this.file.name
    }
  }
}

上面的屏幕截图显示了文件上传/选择后的结果。虽然<span>' 值正确更新，但<input>' 值保持不变。其值仅在单击锚标记后更新。

Answer 1

该b-upload组件有一个input在选择文件时触发的事件：

您可以添加一个设置为所选文件名的input-handler ：data.filename

<b-upload @input="onFileSelected">

export default {
  methods: {
    onFileSelected(file) {
      this.data.filename = file.name
    }
  }
}

演示