Question

我在 Vue.js 中有以下代码：

<div class="file has-name is-fullwidth is-light">
  <label class="file-label">
              <input
                class="file-input"
                type="file"
                ref="img_input"
                @change="onFileChange"
              />
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                  Choose a file…
                </span>
              </span>
              <span class="file-name">
                {{ service.image ? service.image.name : "No File Chosen" }}
              </span>
            </label>
</div>
<script>
  export default {
    name: "ServiceForm",
    data() {
      return {
        service: {},
      };
    },
    methods: {
      onFileChange() {
        this.service.image = this.$refs.img_input.files[0];
      },
    },
  };
</script>

但是在 vue devtools 中我可以看到图像正在上传到状态，但是第三级不起作用并且仍然没有返回选择的文件。

Answer 1

您有一个反应性警告，请尝试使用 this.$set :

this.$set(this.service,'image' , this.$refs.img_input.files[0]);

或者你应该像这样初始化图像属性：

data() {
  return {
    service: {image:null},
  };
},

当文件状态改变时，Vue.js 不会重新渲染

1 个答案: