I need to put some HTML code inside innerHTML but I have also some components that need to use like 'vue-feather-icons', I have tested many ways but I didn't find the solution yet.
my tries are
<div class="blog blog-block" v-html='`<div>${<ChevronLeftIcon></ChevronLeftIcon>}</div>`'>
<div class="blog blog-block" v-html='`<div><ChevronLeftIcon></ChevronLeftIcon></div>`'>
There is a correct way to put a componenet inside innerHtml
Related
Is it possible to parse string with components inside to template in vue.js? Example of string:
"Some text, some <b>bold text</b>, and inserted image from this
component <vue-simple-image :src='images/my_image_name.png' />, another text and html tags."
It looks like I need store such strings to database to use them later for recreating user input from vue-wysiwyg editor.
In the strict sense you asked the question, I do not think this is possible. There is a v-html directive, that can render html for you but not components. This is also considered an anti-pattern, as the vue guide states:
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.
You could look into dynamic components in order to render vue components based on user input.
You could parse the wysiwyg user input, split the string on recognized vue-component tags (so you have an array of pieces of elements with sequences of regular html and elements that are single vue-components), and then use a template with v-for looping to render this. (non-working pseudocode) example:
<div id="renderedWysiwygInput">
<div v-for="elem in splitInput">
<component v-if="stringIsVueComponent(element)" v-bind:is="element"></component>
<div v-else v-html="element"></div>
</div>
</div>
You'll have to work this example out a bit more though to account for the possibility of input inside the vue components themselves, for example if you are filling slots. I would try to limit what kind of input you are going to support to keep it manageable.
No, this is not possible, because Vue component is not just an html piece, it is a js class. So you need to register it properly and so on...
I'm still pretty new to vue.js.
I recently created some vue components to tidy up my html. The components are different inputs like text and checkbox. They update the parents data using $emit('input', val). And make sure that the components are up-to-date using props and watch() on those props.
Now there is a problem with using watch() on <input type="file />, since you cannot set the input value like you can on other input types.
Using this example:
https://jsfiddle.net/minde281/nyu73dz6/25/
I have a list of, in this case, items on a shoppinglist. You can add an image for each item.
The image is loaded and added to the list. This works fine.
To get my problem:
add an image to item1
delete that item by clicking the X-button
The result is now that item2 will have that image on the <input type="file" />. The preview works as expected since this can be set through script and therefore use watch(). But somehow vue removes the wrong part of the html markup causing the last one to be removed.
Is there a different way to solve this problem? Or is there a way to tell vue to remove the correct part of the html markup?
-Minde
Vue tries to reuse the component and thats why the selected file is in the second input after deleting the component.
To prevent that you should use the key binding like this:
<li v-for="(item, index) in items" :key="item.name">
Now the hole component gets removed and everything should work as expected.
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!
Server side rendering page for reference: ssr.html
Now the problem, what if we want to define template inside the <div id="app"></div> in html file itself, not in Vue instance template property? Like this:
<div id="app">You have been here for {{ counter }} seconds.</div>
In this case if we want to pre-render it, we will get next pre-rendered html:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
And here is the conflict problem. If we will output pre-rendered html, we lose our template and Vue doesn't know where to output counter inside our <div id="app">.
Is it possible somehow to provide template inside <div id="app"></div> container and in the same time pre-render it? Or provide template near the pre-rendered in html(so Vue will know that here is pre-rendered and here is template and i will use it if any changes happens in the model)?
Is it possible somehow to provide template inside container and in the same time pre-render it? Or
Short but complete answer: No. For Vue SSR, you cannot use in-DOM templates. You have to use string-based templates (including Single File Components).
I'm making a generic vue button component.
In some cases it would be a router-link while in other cases it would be a normal anchor tag.
So basically looking for something like this.
<template>
<router-link v-if="useRouter" :to="link"></router-link>
<a v-else :href="link"></a>
</template
But a vuejs component template must have exactly one root element.
Besides making two seperate vue components or wrapping my button in an element. I can't think of any other solution.
Is there a better way to solve this?