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

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
    }
  }
}

上面的屏幕截图显示了文件 upload/selection 之后的结果。虽然 <span> 的值正确更新，但 <input> 的值保持不变。它的值只有在点击锚标签后才会更新。

Answer 1

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

您可以添加一个 input 处理程序，将 data.filename 设置为所选文件的名称：

<b-upload @input="onFileSelected">

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

demo

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

input value should update on span value changes once file uploads

vue.js

vue-component

buefy

vuejs3