Please check out this page and its source code. If I remove the cdn for the vue-tag-input component, everything except the component renders. But as soon as I add the cdn back, everything after first instance of tag-input component is not rendered on DOM. No error logs.
Please help me understand what is going on. As far as I understand there should not be any issue with component as I can render multiple instances and the same page layout in vue app using cdn. Check out App.vue file as well. This works perfectly fine.
You need to use valid html5 so you can't use self closing tags.
Change <tag-input v-model="tags" /> to <tag-input v-model="tags"></tag-input>
When vue component is used directly inside the html (not in single file vue component template), we need to take care of certain things
Don't use self closing tag for the component
convert all camel case to kebab case for component name and all the props (custom attributes)
There were above two errors because of which the implementation in question was not working.
Related
I'm using Vue.js 2.x + Quasar 1.x with http-vue-loader (so no build tools) at the moment.
I put a q-dialog in a separate component - let's call it MyComponent, and when I just hook it up in a parent component like so:
<my-component></my-component>
then nothing happens, it's not even in the DOM... When I just insert the whole q-dialog template into the parent component, without having its separate external component, everything works just fine with a simple v-model.
So I imported the component successfully, that part is fine.
I was trying to invoke it when I click on a button, but I can't really communicate with the component this way.
Now I've come across two separate ways of creating dialogs in Quasar, the first one is using the component when it's not in its separate component. The second one seems to be the one I might need for a separate dialog component. The problem is that importing an external component with vue-http-loader looks like this:
components: {
'my-component': httpVueLoader('/components/MyComponent.vue'),
},
while according to the Quasar docs, it should look like this:
import CustomComponent from '..path.to.component..'
...
this.$q.dialog({
component: CustomComponent,
...
The docs are a bit confusing to me as well. :/
Unfortunately, I can't see the CustomComponent code, which is required to be created following an interface, which is described in this docpage under the warning. Make sure that CustomComponent is valid.
P.S. - Both of those ways do the same thing but in different ways. With the first one, you'll import that component to another and set him in the template, but with the second one, you'll call a tool, that creates a new modal with passed parameters. But the second one doesn't have all functionality compared to the first one.
I am getting the classic error:
Error caught during routing: Error: Target container is not a DOM
element.
on this line of code:
ReactDOM.render(<GamerTag game={this.model} />, document.getElementById("gameDescription"));
I am rendering that React dom inside a Backbone view.
gameDescription is the ID of a div in my view's template where the React component is being rendered.
Like everyone says, put your main js file at the bottom of your main index file.
And I did, I put <script src="~/dist/app.js"></script> right before the ending </body> tag.
But I still get the error.
I know the div exists, because when I view the source in the browser, I see it.
Also, if I use document.body.appendChild(document.createElement("div")) inside the ReactDOM.render,
it works fine...well except for the fact that it's at the bottom of my page where I don't want it to be.
So I am horrid besides myself, what other options or things can I try? I am out of clues.
Thanks you!
Your element doesn't exist when react is trying to render your component.
I'm guessing this is because your backbone view isn't rendered at the time that react is trying to render the component.
An easy way to check this is to put a debugger; statement in your code just before your ReactDOM.render() call, and while stopped, open your DevTools, and look at the DOM and search for you element.
Or just open the console and run document.getElementById('gameDescription') and see if it's actually there.
I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?
I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.
When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.
Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.
What I also tried is passing the code escaped to the component like
<code-example>
<component></component>
</code-example>
To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.
Are there any other methods of dealing with this problem that I might be missing?
As #Timothy suggested you may try the <pre> tag.
If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.
This is a library that supports multiple languages and is quite easy to use.
The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
And root component is
#Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
A plunker that demonstrates the problem is here.
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
However, root component just ignores ng-content.
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
It looks like it is a known problem but I'm unable to find a workable solution.
How can it be fixed?
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
From https://github.com/angular/angular/issues/1858#issuecomment-207993202
Components only work as components when referenced in the template of
another component, yet they are expected to be used outside of this
which causes confusion
Using <ng-content> in root component planned to be implemented.
https://github.com/angular/angular/issues/4946