I don't know if this is even possible or maybe this is just a stupid question, but here it goes:
Is it possible to pass data from you Laravel controller to a React Component through a blade template?
I'm asking this because I have a form where I have three static form elements (name, description & deadline) that are defined in blade and a dynamic part that adds elements (extra fields; name, description and type for each extra field) to the form on a button click.
I also want to use the component for editing, so I need to push data into it. My train of thought was to use React for the dynamic part so that I don't have to use native JS or jQuery to build this.
Note that I'm a beginner at React so I this point I don't even know if I'm doing it right/wrong. I've added a screenshot of the form to show illustrate what I mean. (sorry it's in Dutch but I've tried to add some notes to make it clear)
This maybe will help you out:
under Rendering json ..
This is how vuejs works. Your controller would return a variable like $project and you would pass it as a prop into your component by using #json($project)
Related
Following on Dynamic tag name in jsx and React
I tried both suggested answer but both of them seems to not pass any props!!
(Here is a an example of this issue)[https://codesandbox.io/s/angry-torvalds-x7hcv?fontsize=14]
What am i doing wrong?
Here is another example which is not minimal like the one above, using React.createElement, which also doesn't work as it should and it seems its not passing any props
outputElement = React.createElement(
`${this.props.UI_Element.type}`,
{
...globalRequiredProperties,
...this.props.UI_Element.config
},
...UIChildren
)
In short my final goal is creating an imported component, dynamically only by having its type (or name you might say).
Update 01:
After constatnly looking i found an alternative way, this uses an array in which you map an string to the actuall component and then create a tag which uses the map to call the component
Here is an example
This seems to be working as it should but i still would like to avoid creating the map manually, meaning i still wish to only create the component only using string!, is there a way to do this?
I was looking for a way to not only dynamicly import a component but also create it dynamicly, but this could not be achieve how a dynamic tag was created, after looking for a while i came across a library which exatcly does this!!
The Library is called react-loadable
Here is an example
As you can see both the import, the component tag and everything else is created dynamicly just as i want it, hope this helps everyone else too.
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 using VueJS 2 to build a drag-and-drop layout builder. One of the requirements of that project is to be able to have some components that will allow for custom content to live inside (they will be just a wrapper around that content). And to be really concrete, I am trying to pass in and render another drag-and-drop zone which is implemented in a draggable component.
Basically, I want to pass a VueJS template to the component via a prop and have that template rendered inside of the component. This is necessary because I do not want the UI to limit the needs of the developer and therefore need this to be really extensible.
In the following trivial example I would like the "ui-element" to render the content prop inside of it and use the other prop as a data input.
<ui-element
:content="<draggable :name="contentData"></draggable>"
contentData="col1"
>
</ui-element>
Since just outputting the template will escape it, and v-html directive will treat it as regular HTML and not a template I am lost, not really sure how to get this done.
I spent about an hour or more googling but no luck. Which leaves me to three options:
1) I'm the first one to need this complex use case (unlikely)
2) Doing this is stupid on so many levels that no-one even bothered (if so, please let me know how to get this result in a smarter way)
3) There is a special uber-cool JS term for this which I simply do not know and that made my search attempts futile
You'd want to use slots instead.
In your ui-element component, define a slot like so:
<template>
<div>
<slot name="content"></slot>
</div>
</template>
Then you could pass in the draggable component like so:
<ui-element contentData="col1">
<draggable :name="contentData" slot="content"></draggable>
</ui-element>
Here's a very basic fiddle example of a slot.
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.
I'm using Vue.js to build ui for my html5 game. I have a case where I want to define ui-containers which essentially just group other ui-components and position them to somewhere on screen. So I could have something like this going on:
<ui-container>
<ui-component1></ui-component1>
<ui-component2></ui-component2>
<ui-component3></ui-component3>
</ui-container>
Where I need to add and remove those components dynamically based on data-model which represents the content of the container. The problem is that I'd like to keep ui-container generic, so that I can append any Vue-component to it without having information in template about which components there might be.
I googled and found this example which concerns injecting components dynamically: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom
While the data-driven version in example was easy to make and understand, it uses v-for for tag and therefore requires one to know before hand the type of child-component.
So question is, how I can generalize that example to work with any component dynamically? Should my data-model have the type of component or tag name of it and then interpolate it in v-for? Or is there existing mechanism for this kind of requirement?
You can use special is attribute to dynamically set the type of a component. Here are the docs. The code will look somewhat like:
<div id="app">
<div v-for="component in components" :is="component.type" :value="component.value"></div>
</div>
Working fiddle to play with: Dynamic Vue.js components