I am using Meteor 1.2.1 and am running into an issue with FlowRouter. I have a '/' route declared in routes.jsx and it renders my Walls component in the MainLayout.
I added a second route '/brews' and a Brews component and and I get this error when I go to localhost:3000/brews:
Exception from Tracker recompute function:
debug.js:41 ReferenceError: Brews is not defined
at FlowRouter.route.action [as _action] (router.jsx:9)
at Route.callAction (route.js:51)
at router.js:447
at Object.Tracker.nonreactive (tracker.js:589)
at router.js:431
at Tracker.Computation._compute (tracker.js:323)
at Tracker.Computation._recompute (tracker.js:342)
at Object.Tracker._runFlush (tracker.js:481)
at Object.Tracker.flush (tracker.js:441)
at Router._invalidateTracker (router.js:489)
Here is the code:
**router.jsx***
FlowRouter.route('/', {
action() {
ReactLayout.render(MainLayout, { content: <Wall /> });
}
});
FlowRouter.route('/brews', {
action() {
ReactLayout.render(MainLayout, { content: <Brews />});
}
});
***wall.jsx*** *** This Renders fine ***
Wall = React.createClass({
render() {
return (
<div className="footer">
<h1>Welcome to the Wall!</h1>
</div>
)
}
});
***brews.jsx***
Brews = React.createClass({
render() {
return (
<div className="footer">
<h1>Welcome to the Wall!</h1>
</div>
)
}
});
***main.jsx***
MainLayout = React.createClass({
render() {
return (
<div>
<Header />
<div className="container">
{this.props.content}
</div>
<Footer />
</div>
)
}
});
***main.html***
<head>
<title>Example React App</title>
</head>
<body>
<div id="react-root"></div>
</body>
Related
I have shown vechicle data just I want to get driver data related to vehicle but unfortuntly i am getting error undefined please help me how can i show into draggablelist thank u ?
Controller
public function index(){
return $vehicles = Vehicle::with('driver')->get();
}
template view
<div class="row">
<div class="col-6">
<q-card-section>
<div class="tw-grid">
<div class="tw-col-span-6">
<DraggableList
v-model="api.drivers"
label-key="username"
:colors="colors"
/>
</div>
</div>
</q-card-section>
</div>
</div>
vue js
export default {
data () {
return {
api: {
vehicles: [],
drivers: []
}
}
},
mounted () {
this.fetchVehiclesDriver()
},
methods: {
fetchVehiclesDriver () {
this.$api.get(this.apiRoute('client.vector.driver', {
}))
.then(({ data }) => {
this.api.vehicles = data.vehicles
this.api.drivers = data.vehicles.driver
console.log(data.vehicles.driver) // undefined
})
}
}
}
Trying to get data from a child component inside the parent component but its not working proper, the event is fired but runs twice, first time with no data(mouseEvents info)
EDIT
parent.vue
<template>
<div>
<button #clickEventChild="formSubmit"/>
</div>
</template>
<script>
export default {
methods: {
const formSubmit = e => {
console.log(e) //first time it will output mouseEvents...
if (e.submitter) { // prevents running twice
e.submitter.classList.add('active');
...
}
}
}
}
</script>
child.vue
<template>
<div>
<button class="btn" #click="handleClick">
save
</button>
</div>
</template>
<script>
export default {
emits:['clickEventChild'],
methods: {
handleClick: function(e) {
this.$emit("clickEventChild", e);
}
}
}
</script>
I'm trying to get a little bit famliar with vue 3.
I wrote a class based component and try to call the mounded() Lifecycle method.
But for some reasons it doesn't work. The documentation isn't helpfull at this point to me.
So any help would be nice.
Here is the class:
<template>
<div class="hello">
<Header />
<div class="container mrgnbtm">
<div class="row">
<div class="col-md-8">
<!--<CreateUser #createUser="userCreate($event)" />-->
</div>
<div class="col-md-4">
<!--<DisplayBoard :numberOfUsers="numberOfUsers" #getAllUsers="getAllUsers()" />-->
</div>
</div>
</div>
<div class="row mrgnbtm">
<Users v-if="users.length > 0" :users="users" />
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { userService } from "../services/UserService";
import Header from "./Header.vue";
import CreateUser from "./CreateUser.vue";
import DisplayBoard from "./DisplayBoard.vue";
import Users from "./Users.vue";
Vue.registerHooks(
['beforeRouteEnter',
'mounted']
)
#Options({
components: {
Header,
CreateUser,
DisplayBoard,
Users,
},
})
export default class Dashboard extends Vue {
users: any;
numberOfUsers = 0;
getAllUsers() {
userService.getAllUsers().then((response) => {
console.log("Call UserService");
this.users = response.json;
this.numberOfUsers = this.users;
});
}
userCreate(data: any) {
console.log("data:::", data);
userService.createUser(data).then((response) => {
console.log(response);
this.getAllUsers();
});
}
mounted() {
console.log("mounted");
this.getAllUsers();
}
}
</script>
In case that mounted() isn't called, users is allways null.
Thanks in advance
Thanks to #Toni19.
The error was, that users wasn't initialized.
So I changed this an now all is working as expected.
Thanks
I am making an app that communicate with an api and fetch data,home page changes every day so i can't just add static components to it,
i need to create it according to the data that comes from the api.
i have a component for the home page called Home.vue
this component can have one or more Carousels depending on the data that i'am fetching.
i also have Carousel.vue which is responsible about displaying images and it had it's own props.
the question is :
How to add component to the dom from loop
this is Home.vue where i am making the loop :
<template>
<div>
<!--I Need The Loop right here-->
</div>
</template>
<script>
export default {
components: {},
data() {
return {
page_content: [],
widgets: [],
}
},
created() {
this.getHomeContent();
},
methods:
{
getHomeContent() {
window.axios.get(window.main_urls["home-content"]).then(response => {
this.page_content = JSON.parse(JSON.stringify(response.data));
console.log(this.page_content);
for (let index in this.page_content) {
switch (this.page_content[index].type) {
// if type is banner
case 'banner':
switch (this.page_content[index].display) {
// if display is carousel
case 'carousel':
console.log('carousel')
// end if display is carousel
this.widgets.push({
'type': 'Carousel',
'images': this.page_content[index].items,
})
}
// end if type is banner
}
}
});
}
}
}
</script>
and this is Carousel.vue which i need to be imported when needed with passing props :
<template>
<div>
<div >
<VueSlickCarousel>
<div v-for="image in images">
<img src="{{img}}">
</div>
</VueSlickCarousel>
</div>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default
{
components: {VueSlickCarousel},
name:'Carousel',
props:[
'images'
],
methods:
{
}
}
</script>
how to add Carousel.vue component to Home.vue dynamically some thing like:
if(data.display == 'carousel')
{
<carousel images="data.images"></carousel>
}
Import the component to your Home.vue :
import Carousel from './Carousel.vue'
export default {
components: {Carousel},
}
Then loop in your template:
<carousel v-for="(widget,index) in widgets" :key="index" :images="widget.images"/>
Best to use a widget.id rather than index for the key prop
This is the correct answer !
<template>
<div>
<template v-for="widget in widgets">
<div v-if="widget.type == 'carousel'" :key="widget.type">
<carousel
:images="widget.images"
:arrows ="widget.arrows"
:dots = "widget.dots"
>
</carousel>
</div>
</template>
</div>
</template>
<script>
import Carousel from './widgets/Carousel.vue'
export default {
components: {Carousel},
data() {
return {
page_content: [],
widgets: [],
}
},
created() {
this.getHomeContent();
},
methods:
{
getHomeContent() {
window.axios.get(window.main_urls["home-content"]).then(response => {
this.page_content = JSON.parse(JSON.stringify(response.data));
console.log(this.page_content);
for (let index in this.page_content) {
switch (this.page_content[index].type) {
// if type is banner
case 'banner':
switch (this.page_content[index].display) {
// if display is carousel
case 'carousel':
console.log('carousel')
// end if display is carousel
this.widgets.push({
'type': 'carousel',
'arrows':true,
'dots':true,
'images': this.page_content[index].items,
})
}
// end if type is banner
}
}
});
}
}
}
</script>
I have a small problem. After requesting a data from a service I got an iframe code in response.
<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>
I would like to pass this in as a props to my modal component and display it but when I simply {this.props.iframe} it in the render function it is obviously displaying it as a string.
What is the best way to display it as html in react or using JSX?
If you don't want to use dangerouslySetInnerHTML then you can use the below mentioned solution
var Iframe = React.createClass({
render: function() {
return(
<div>
<iframe src={this.props.src} height={this.props.height} width={this.props.width}/>
</div>
)
}
});
ReactDOM.render(
<Iframe src="http://plnkr.co/" height="500" width="500"/>,
document.getElementById('example')
);
here live demo is available Demo
You can use property dangerouslySetInnerHTML, like this
const Component = React.createClass({
iframe: function () {
return {
__html: this.props.iframe
}
},
render: function() {
return (
<div>
<div dangerouslySetInnerHTML={ this.iframe() } />
</div>
);
}
});
const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>';
ReactDOM.render(
<Component iframe={iframe} />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
also, you can copy all attributes from the string(based on the question, you get iframe as a string from a server) which contains <iframe> tag and pass it to new <iframe> tag, like that
/**
* getAttrs
* returns all attributes from TAG string
* #return Object
*/
const getAttrs = (iframeTag) => {
var doc = document.createElement('div');
doc.innerHTML = iframeTag;
const iframe = doc.getElementsByTagName('iframe')[0];
return [].slice
.call(iframe.attributes)
.reduce((attrs, element) => {
attrs[element.name] = element.value;
return attrs;
}, {});
}
const Component = React.createClass({
render: function() {
return (
<div>
<iframe {...getAttrs(this.props.iframe) } />
</div>
);
}
});
const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>';
ReactDOM.render(
<Component iframe={iframe} />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"><div>
With ES6 you can now do it like this
Example Codepen URl to load
const iframe = '<iframe height="265" style="width: 100%;" scrolling="no" title="fx." src="//codepen.io/ycw/embed/JqwbQw/?height=265&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">See the Pen fx. by ycw(#ycw) on CodePen.</iframe>';
A function component to load Iframe
function Iframe(props) {
return (<div dangerouslySetInnerHTML={ {__html: props.iframe?props.iframe:""}} />);
}
Usage:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div className="App">
<h1>Iframe Demo</h1>
<Iframe iframe={iframe} />,
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Edit on CodeSandbox:
https://codesandbox.io/s/react-iframe-demo-g3vst