Question

我的模板中有这个html

：

        <v-file-input
          :label="label"
          accept="image/*"
          prepend-icon="mdi-camera"
          @change="uploadImage"
          hide-details
          outlined
        />

我的组件还有一个名为current的道具，其中包含一个文本，即当前文件的名称。

显示组件时，v-file-input为空，但我希望它包含当前文件名。我尝试了:value="current"和v-model="current"无济于事。

我该怎么办？

Answer 1

您可以使用value道具。但是它不接受字符串。从文档中：

value-File objects
的单个或数组

例如，这可行：

data() {
    return {
      current: new File(["foo"], "foo.txt", {
                  type: "text/plain",
                })
    }
  }

<v-file-input label="File input" :value="current" ></v-file-input>

执行此操作是否一个好主意是另一个问题：）您知道，您拥有的不仅仅是文件名，而是整个文件（包括内容）。如果用户这样提交您的表单怎么办？另外，对File() constructor的支持也不太好。...例如在Edge上将无法使用...

Answer 2

您可以为此使用placeholder属性：

<v-file-input label="File input" :placeholder="current" ></v-file-input>

样式可能与“普通”文本有所不同，但有些CSS可能可以解决该问题。

Answer 3

请使用计算属性，因为道具是不可变的，并且将值用于数据绑定v-model="value"

computed () {
    value: {
      get () {
        return this.current
      },
      set (val) {
        this.value = val
      }
    }
  }

将初始文件名值提供给Vuetify v-file-input

3 个答案: