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

Question

上传图像文件后，我希望<input> 的值反映我的<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
    }
  }
}

demo