How can I set a custom placeholder element?
I'd like to add a search icon when the field is empty
Thanks.
TLDR; I just figured out that I can just simply pass a component
I guess I did not get that a node could be a component.
The documentation indicates:
placeholder: PropTypes.string || PropTypes.node
type placeholder = string | React.ReactNode
The following line comes from the source. As you see, it allows a component to be passed.
return !this.state.inputValue ? <div className="Select-placeholder">{this.props.placeholder}</div> : null;
So I can use
<Select placeholder={<div>Type to search</div>} />
<Select placeholder={<div>Type to search</div>} />
works
Related
Here I am trying to show image from data object in vue js. Here is my code
<a onclick="openModal()"><img src="{{product.productImageList[0]['name']}}"></a>
But it shows in dom like
<img src="{{product.productImageList[0]['name']}}">
Besides if I keep {{product.productImageList[0]['name']}} outside image tag then it shows value
Remove the interpolation
<img v-bind:src="product.productImageList[0]['name']">
For concatenation either go with
<img v-bind:src="'https ://admin.com/item_image/'+product.productImageList[0]['name']">
Or use computed property
computed: {
getUrl() {
return url=> {
const newUrl = `https ://admin.com/item_image/${product.productImageList[0].name}`;
return newUrl;
}
}
}
along with below template change
<img v-bind:src="getUrl(product.productImageList[0].name)">
{{}} is a template for displaying text. For attribute, instead you use v-bind with a valid javascript expression. Change to the following should work:
<img v-bind:src="product.productImageList[0]['name']">
Since the argument is a variable try binding the input like below
<img :src="product.productImageList[0]['name']">
I use Vue 3
I used this before. It worked just fine.
<textarea v-model="description" required></textarea>
But I changed it to this
<QuillEditor
v-model="description" required
/>
In QuillEditor, many factors such as placeholder worked well, but only v-model didn't work.
Is this simply a dependency issue? If not, how should I change it?
I downloaded it from https://vueup.github.io/vue-quill/guide/installation.html#cdn
If this is a simple dependency problem, is there a solution? If not, could you recommend another vue3 compatible editor? (Images may be attached)
you can use the component like this:
<quill-editor v-model:content="modelname" contentType="html" theme="snow"></quill-editor>
For more info check: https://vueup.github.io/vue-quill/api/#v-model-content
here's how you should fix it :
<quill-editor v-model:content="modelname" contentType="html" />
just sharing my finding as below:
because of quill-editor component default content Type is "delta", but if you want to assign value ( string type ), then you need to change the content type from delta to text or html
by API props "content" or "v-model:content"
set the string value on quill-editor component
set the contentType props to "text" or "html" on component
use the :content or :v-model:content" to pass the string value to quill-editor component
referral link: https://vueup.github.io/vue-quill/api/
You can use this editor. I am using this editor and it's work's.
Visit - https://www.npmjs.com/package/vue3-editor
Instruction -
npm i vue3-editor (install it)
import { VueEditor } from "vue3-editor"; (use on specific component)
components: {VueEditor}, (use in component)
(use this in form)
thank you!!
I am using the vue-multiselect library like so:
in src/components/FeedbackForm.vue
<div>
<CustomerSelect :required="true" />
</div
Question: How can I make this select component required on the client-side? I thought I would be able to simply add an HTML5 attribute like so:
in src/components/CustomerSelect.vue
template section:
<multiselect
id="customer_last_name_input"
v-model="c_lastname_value"
:options="getActiveUserProfiles"
label="lastname"
track-by="uid"
:close-on-select="true"
#select="onSelect"
#remove="onRemove"
required <----------can't do this?
>
script section:
props: ['required']
Doing the above code does not invoke client-side validation in the browser like a regular HTML select element. Thanks for any help.
As for docs it accepts a allowEmptybool prop.
allowEmpty || Boolean || Allows to remove all selected values.
Otherwise one must be left selected.
so it would be
<multiselect
id="customer_last_name_input"
v-model="c_lastname_value"
:options="getActiveUserProfiles"
label="lastname"
track-by="uid"
:close-on-select="true"
#select="onSelect"
#remove="onRemove"
:allow-empty="required" <----------do this?
>
I am using Vue refs in my application so that in click a button some text will be select and copy. So I am using like
//In template
<input type="text" ref="url" value="my url"/>
<button #click="copylink">Copy Link</button>
//in methods
copylink() {
this.$refs.url.select()
}
that is undefined.
But Using document.querySelector('input').select() I can select that.
My question is it possible all document methods using $refs. How do you do this?
If you do console.log(this.$refs.url) it will give you back an array type result. All you have to do is: this.$refs.url[0].select() and it will work.
Let me know.
Vue.js Directive for Typeahead
I am trying to write a Vue Directive for typeahead.js functionality. I was able to instantiate typeahead on the input form control and also assign it options and dataset. Event handling too was not a problem.
The Issue :
Now, I also want to control the typeahead input element from the component. For example, I would like to control these methods $(el).typeahead('destroy') or $(el).typeahead('open'), etc. from the component.
How can i call these methods from the Component? Is it possible ?
Ok, I just figured it out 2 minutes after typing the question.
I add a ref to the input tag.
<!-- bindings is an object which has the "options" and "dataset" -->
<input ref="ttInput" v-typeahead="bindings" />
Then, I have added a method in the component which executes typeahead methods from the component:
...
methods: {
methodHook (action) {
const el = this.$refs.ttInput
$(el).typeahead(action)
}
}
...
So, now, in the html template, i can have a button/buttons:
<button type="button" #click="methodHook('open')" >Open</button>
<button type="button" #click="methodHook('close')">Close</button>
Works like a charm.
Thanks