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!!
Related
I'm trying to develop some components that will be used by our content editors in Storyblok and there's a use case where we would like to define layout properties (using Tailwind's classes) through props that will be coming from Storyblok components.
As an example,
I am passing the width prop through storyblok giving a value of w-1/2 which is a Tailwind class. As you see on the right the class is applied just fine to the element but there's no actual impact on the page. I have tried the same with many other classes (either for background or border colors or for text styling etc, tried to use Tailwind classes as props coming from Storyblok but didn't work).
My only guess is that Nuxt is a server side application and the CSS gets compiled on build time, therefore any new class binding to the DOM will not reflect the actual CSS that they represent. Is this right? If yes, is there a way to make this happen and work?
The code for the widthSetter component is as simple as that
<template>
{{blok.width}}
<div v-editable="blok" :class="[ blok.width ]">
<component
v-for="value in blok.blocks"
:key="value._uid"
:is="value.component"
:blok="value"
/>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
blok: {
type: Object,
required: true,
},
})
</script>
You need to add Complete Class Names.
As there is no w-1/2 in your code, TW won't generate the class.
You can workaround the issue by adding the class to safelist.
Doc: https://tailwindcss.com/docs/content-configuration#safelisting-classes
module.exports = {
safelist: ['w-1/2'],
//...
}
Then w-1/2 utility will be generated regardless if it shows up in your code or not.
I have one Vue component in which any style attribute on any tag in the component template is stripped from the rendered output. Vue 2.6. No build step. The component template is defined in a js template string. Style is stripped whether it's bound or static. Style attributes on neighbouring components are rendered just fine. There are no carriage returns in my styles. Does this suggest anything to anyone ?
Here's the start of my component...
Vue.component("justif-choice", {
template: `
<div style="top:500">
qsdfqdf
</div>
`,
...
This is the line that calls my component...
<xsl:text disable-output-escaping="yes">
<justif-choice ref="justifChoice" ></justif-choice>
And here's the rendered output...
Ok found it. The style rule I was testing, top:500, needed 'px' to be valid. So it was the browser stripping it, not Vue? There may be more to this story because the same code works fine on another page, but adding 'px' has fixed it.
I ran into a little problem trying to access subcomponents in vue 2.5.2 while using Typescript 2.4.2.
I am trying to access a Keen UI UiSelect component by adding it to $ref with the ref="selectfield" attribute and then access it in my Vue component with this.$refs.selectfield.
The UI-Select component is unrendered with the v-if="showSelect" directive.
onClickSpan(){
showSpan = false;
showSelect = true;
console.dir(this.$refs);
console.dir(this.$refs.selectfield);
}
I have referenced two different elements with ref.
I have already tried outputting this.$refs in the console and the Object selectfield is definitely there:
>{…}
|> currentNumField: <div style="width: 100%;">
|> selectfield: Object { _uid: 32, _isVue: true, "$options": {…}, … }
|> __proto__: Object { … }
undefined
Unfortunately trying to access it will always tell me that this.$refs.selectfield is undefined.
I am pretty new to Vue and Typescript and just don't know what could be causing this problem.
Thank you for your time.
You must give a little more information please.
Look at the example
https://jsfiddle.net/Jubels/50wL7mdz/78450/
this.$refs.paraG would return the node.
this.$refs.custom would return the vue component
<p ref="paraG">{{ message }}</p>
<custom-component ref="custom">{{ message }}</custom-component>
Hope this clear any uncertainty
I am not certain where the problem came from, but for everyone having similar issues here is a possible solution:
Use v-show instead of v-if.
It seems as though the problem is related to the way the DOM is rendered by using v-if.
The ref to the DOM Element is added to the $refs attribute of my component, but the variable $refs.mycomponent is empty since an element that is hidden with v-if is not only not rendered but not even added to the DOM.
I tried using a delay after making the object visible, but that did not solve the problem.
I can only assume that this is due to an issue with typescript that doesn't properly update the $refs attribute whenever the DOM is rerendered since this works with v-if when I am only using Vue.
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
I'm rendering some HTML in a v-for
But everytime I change any of the data, all my html gets replaced (input fields lose their values)
I tried giving the :key all kinds of different values
I didn't have this problem in vue v1, only in v2
http://jsbin.com/jomuzexihu/1/edit?html,js,output
I had a little play with this and it appears that Vue does not re-render the entire list when using <input /> or if you use a component but it does with v-html. Heres the fiddle for the comparison:
https://jsfiddle.net/cxataxcf/
The key actually isn't needed here because the list isn't being re-ordered, so your issue isn't to do with :key but rather with v-html. Heres what the docs say about v-html:
The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
So I guess this is where the problem lies.
It might be worth raising an issue on Vue's github page to see whether this is the expected behavior for v-html, but Vue 2.0 is much more heavily focused on components than vue 1.x and doesn't appear to recommend using v-html, so it may just be that you need to re-factor your code to use components instead.
Edit
The solution to this problem is to simply wrap the code in a component and pass the HTML as a prop:
Vue.component('unknown-html', {
props: {
html: ""
},
template: '<div><div v-html="html"></div>'
})
The markup:
<unknown-html :html="thing.html"></unknown-html>
And the View model:
var app = new Vue({
el: '#app',
data: {
numInputs: 1,
stuff: [{
'html':'<input />'
}, {
'html':'<button>Foo</button>'
}]
}
})
Here's the JSFiddle: https://jsfiddle.net/wrox5acb/
You are trying to inject raw html directly into the DOM. Probably it was possible in earlier versions of Vue.js, but it is definitely not the recommended way.
You can instead have an array of objects and bind it to html as shown in this jsFiddle: https://jsfiddle.net/43xz6xqz/
Vue.js version: 2.0.3
In the example above, vue.js is responsible for creating the input elements and also for binding these input elements to the object values using v-model.
To extract these values, you may use a computed property as shown in the sample code.
I guess, for performance optimization, when the key is not change, Vue will not rerender the dom, but will update the data import through directive.So when your input element is import through an directive (v-html), it will be rerendered everytime when stuff changes.
Due to the vue is not a string template engines, but template based on dom, so in the case of #craig_h 's example , to use the incomming html in a string template within a component:
Vue.component('unknown-html', {
props: {
html: ""
},
template: '<div><div v-html="html"></div>'
})
view:
<unknown-html :html="thing.html"></unknown-html>
So when the stuff changes, it will not to rerender the template declare in string, for vue is not a string template engine.