Is it possible to the Vuetify v-file-input component on an edit screen where the user can upload files. When a file is uploaded we save the file name. When opening the edit screen again we would like to should the name of the file in the v-file-input component to indicate that there is already a file uploaded. How can we achieve this?
Atempts to achieve this includes:
Setting the v-model to the file name (name does not show up in the input field)
Using the placeholder property together with the file name (doesn't work)
Example of input:
<!-- ID Upload -->
<v-file-input
outlined
dense
accept="image/*"
label="Upload ID / Passport (Certified)"
:rules="[v => !!v || 'ID / Passport is required']"
#change="onNewFileUpload"
></v-file-input>
As Yits suggested in the comments you can use the prepend-inner slot. I used that while chaning the label attribute text dynamically based if a file already existed to achieve the goal.
<v-file-input
outlined
dense
accept="image/*"
:label="fileInputLabel"
:rules="[v => !!v || 'ID / Passport is required']"
#change="onNewFileUpload">
<template v-if="executive.id_doc" #prepend-inner>
{{executive.id_doc.fileName}}
</template>
</v-file-input>
Related
I have a component that uses multiple Vuetify v-file-input components
<v-file-input
:accept="allowedFileTypes"
label="Choose Attachment"
:loading="attachmentBeingProcessed"
name="file0"
id="file0"
:error='fileSizeError[0]'
outlined
dense
#change="fileSelectedForUpload(0)"
#click:clear="removeAttachment(0)"
></v-file-input>
I want to show a particular v-file-input in error mode through code. However, when I set this.fileSizeError[0] = true, it does not put the component in error mode. However, if I use a variable (not array), as show below, it works
<v-file-input
:accept="allowedFileTypes"
label="Choose Attachment"
:loading="attachmentBeingProcessed"
name="file1" id="file1"
:error='fileSizeError1'
:error-messages = "fileSizeErrorMsg1"
outlined
dense
#change="fileSelectedForUpload(1)"
#click:clear="removeAttachment(1)"
></v-file-input>
Is there a reason that I cannot use an array element with ":error"?
Thanks.
There is nothing wrong with assigning an array value to a prop, the problem is changing an array index value is not reactive in Vue 2. As the docs explain, to get around this issue you can update your array[0] value to true using $set:
this.$set(this.fileSizeError, 0, true);
So This is correct way to display image in vue
<img class="cur-img" src="~#/assets/img/test.png" alt="temp-img">
However, the following way is incorrect, if templateImg is a string represent by "~#/assets/img/test.png"
<div v-for="(item,index) in items" :key="index">
<img :src="item.templateImg" alt="template-img">
</div>
Is there any way to fix it?
Usually, you will want to import the asset in your JS code. For example:
<template>
<img :src="image" />
</template>
<script>
import testImage from "#/assets/img/test.png"
export default {
image: testImage
}
</script>
Use the following:
<img :src="require(item.templateImg)">
When we are binding src to a variable, it is giving its raw value to the img tag, which means it's expecting a full resource URL. It's up to us to provide a complete data URL to that resource, which means creating a corresponding absolute resource URL out of the relative asset path that we're using.
Thus, we need to fetch it using require(). If you are using an absolute path like a base64 data image URL, or compete image URLs, then in such cases you don't need require(), and your current code will work just fine.
I am using element-ui, version 1.43.
I want to add spell-check in text area input(if I write something wrong then red line should appear below that text and on right click i can get suggestion).
How to implement it using element-ui.
If you're using an el-form & el-form-item to wrap your el-input type='textarea' elements, you can utilize the label slot to hook into native browser spellcheck functionality.
<el-form>
...
<el-form-item>
<label slot="label" spellcheck="true">Notes</label>
<el-input type="textarea"></el-input>
</el-form-item>
...
</el-form>
I have an app that has components nested inside. The app is called on the filter id. I have a data element named minTotalSpent. Currently, this contains "3" in the app. The first placement on the page displays appropriately. When I try to pass it in as a variable into vue-slider, however, it does not like it and throws an "invalid expression"warning on the counsel and does not respect the minimum.
<div id="filter">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
{{minTotalSpent}}
<div class="filter-container-slider">
<vue-slider
:min="{{minTotalSpent}}"
:max="42"
:value="2"
>
Just elaborating as per #thanksd's answer.
When using any component, over here vue-slider component, if you use v-min = "..." or :min = "...", the value of v-min or :min is in a javascript expression and you cannot use mustaches inside javascript expression.
And when it comes to html attributes like id on any element, you should be using v-bind.
<div v-bind:id="dynamicId"></div>
Read more about them here: https://v2.vuejs.org/v2/guide/syntax.html#Attributes
So I am using a component framework for Vue2 named vuetify and I am having a problem regarding the class of the input textbox.
So in the textbox component, the code is:
<template lang="pug">
div(
class="input-group"
v-bind:class="classes"
)
label(
v-bind:for="id"
v-html="label"
)
input(
v-bind:id="id"
v-bind:name="name"
v-bind:placeholder="placeholder"
v-bind:required="required"
v-bind:type="type"
v-bind:value="inputValue"
ref="input"
)
</template>
Now I want to add a class in the text input because I want it to be a date and I am using the flatpickr plugin. The name of the class is flatpickr. So the way I use the component is like this:
<v-text-input id="someID" label="SomeLabel" v-model="someModel"></v-text-input>
And if I try to add the class random I do it like this:
<v-text-input id="someID" label="SomeLabel" v-model="someModel" class="flatpickr"></v-text-input>
The code isn't working because the class goes to the div. I checked the code generated in the elements of chrome and it looks like this:
<div class="input-group flatpickr" data-v-3eb87e8e="">
<label for="SomeLabel">SomeLabel</label>
<input id="someID" type="text">
</div>
As you can see, the class goes to the class of the div. What's the best way/trick to add a class in the text input? Any help would be much appreciated.
You can apply the same CSS property, by giving path of your input like following:
.random input{
height: etc;
}
Edit
Given that you are also getting id of the input box, to apply the class on specific input, you can also use the id:
.random #someid{
height: etc;
}
to add the class into <div> tag is the design of Vue, the class added into components will be rendered into the top level of the element in the template.
https://v2.vuejs.org/v2/guide/class-and-style.html#With-Components
If you want to apply the css to <input>, you can simply do:
.random input {
/* your css style */
}
If you want to use flatpickr with vuejs, you can try to use this vue-flatpickr component, https://github.com/jrainlau/vue-flatpickr