Related
I have a parent component with 2 child components that both inherit from the same base component. (This parent component is being created and used in a Vue Storybook). Both SiblingAComponent and SiblingBComponent inherit the same BaseComponent, and instantiate the same inherited data classInstance, which is a vanilla JS class instance from another library. I am trying to access this classInstance from the parent component to pass as data into the second sibling component (in this case, from SiblingAComponent to SiblingBComponent), by using an reference siblingARef. However, I get this error from the storybook compiler:
too much recursion
isArguments#http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49010:16
keys#http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49073:28
_traverse#http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119972:19
_traverse#http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119974:28
ParentComponent Story:
storiesOf("ParentComponent Story", module)
.addDecorator(
withKnobs({
escapeHTML: false
})
)
.add("Passing data from A to B", () => ({
name: 'ParentComponent',
components: {
SiblingAComponent,
SiblingBComponent,
},
data() {
return {
siblingAData: [....], // array of objects
siblingAOptions: {
axes: {},
height: "50px",
},
siblingBData: [...], // array of objects
siblingBOptions: null,
}
},
mounted() {
const siblingAInstance = this.$refs.siblingARef.classInstance;
const newOptions = {
legend: {
external: {
reference: siblingAInstance,
},
},
};
// this line is where I am getting an error
this.siblingBOptions = legendExternal;
},
template: `
<SiblingAComponent ref="siblingARef" :data="siblingAData" :options="siblingAOptions"/>
<SiblingBComponent v-if="siblingBData" :data="siblingBData" :options="siblingBOptions"/>
`,
}));
SiblingAComponent:
<template>
<div class="sibling-a-component"></div>
</template>
<script>
import { ComponentA } from '#libraryexample/components';
import BaseComponent from './base-component.vue';
export default {
name: 'SiblingAComponent',
extends: BaseComponent,
mounted() {
this.classInstance = new ComponentA(this.$el, {
data: this.data,
options: this.options,
});
},
};
</script>
SiblingBComponent:
<template>
<div class="sibling-b-component"></div>
</template>
<script>
import { ComponentB } from '#libraryexample/components';
import BaseComponent from './base-component.vue';
export default {
name: 'SiblingBComponent',
extends: BaseComponent,
mounted() {
this.classInstance = new ComponentB(this.$el, {
data: this.data,
options: this.options,
});
},
};
</script>
BaseComponent:
<script>
export default {
name: 'BaseComponent',
data() {
return {
classInstance: null,
};
},
props: {
data: { type: [Object, Array], required: true },
options: { type: Object, required: true },
},
};
</script>
Coming from the Angular and React worlds, using a reference to access a Vanilla class instance from another Component is nothing new, even if it's unconventional. I am new to Vue, so I am wondering why would trying to access a class instance fail (works fine for primitive data types) and give me such a weird error? Where is the recursion occurring?
I want to display data from API with highcharts but still get an error because highchart config declared outside the class app and data fetched inside class app.
It works if use static data,
here is the example from static data link.
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';
const data = [
[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000,
21.66], [1221091200000, 21.81], [1221177600000, 21.28],
[1221436800000, 20.05], [1221523200000, 19.98], [1221609600000,
18.26], [1221696000000, 19.16], [1221782400000, 20.13],
[1222041600000, 18.72], [1222128000000, 18.12], [1222214400000,
18.39], [1222300800000, 18.85], [1222387200000, 18.32],
[1222646400000, 15.04], [1222732800000, 16.24], [1222819200000,
15.59], [1222905600000, 14.3], [1222992000000, 13.87],
[1223251200000, 14.02], [1223337600000, 12.74], [1223424000000,
12.83], [1223510400000, 12.68], [1223596800000, 13.8],
[1223856000000, 15.75], [1223942400000, 14.87], [1224028800000,
13.99], [1224115200000, 14.56], [1224201600000, 13.91],
[1224460800000, 14.06], [1224547200000, 13.07], [1224633600000,
13.84], [1224720000000, 14.03], [1224806400000, 13.77],
[1225065600000, 13.16], [1225152000000, 14.27], [1225238400000,
14.94], [1225324800000, 15.86], [1225411200000, 15.37],
[1225670400000, 15.28], [1225756800000, 15.86], [1225843200000,
14.76], [1225929600000, 14.16], [1226016000000, 14.03],
[1226275200000, 13.7], [1226361600000, 13.54], [1226448000000,
12.87], [1226534400000, 13.78], [1226620800000, 12.89],
[1226880000000, 12.59], [1226966400000, 12.84], [1227052800000,
12.33], [1227139200000, 11.5], [1227225600000, 11.8],
[1227484800000, 13.28], [1227571200000, 12.97], [1227657600000,
13.57], [1227830400000, 13.24], [1228089600000, 12.7],
[1228176000000, 13.21], [1228262400000, 13.7], [1228348800000,
13.06], [1228435200000, 13.43], [1228694400000, 14.25],
[1228780800000, 14.29], [1228867200000, 14.03], [1228953600000,
13.57], [1229040000000, 14.04], [1229299200000, 13.54]
];
const config = {
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
};
class App extends Component {
render() {
return (
<div className="App" />
);
}
}
render(<ReactHighstock config={config}/>,
document.getElementById('root'));
With example above, two variable data and config placed outside the class app, so i think it's not problem.
But if i want to fetch data from API, the data placed inside the class app and config still outside class app.
So i get an error 'data is not defined'
here is the link
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';
const config = {
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
};
class App extends Component {
constructor() {
super();
this.state = {
dataResults: [],
}
}
componentDidMount() {
this.getData();
}
getData = () => {
fetch('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json')
.then(res => res.json())
.then(data => {
this.setState({
dataResults: data
});
});
}
render() {
return (
<div className="App" />
);
}
}
render(<ReactHighstock config={config}/>,
document.getElementById('root'));
How to use highcharts with fetched data from API?
Your App component is currently not part of your DOM as you're rendering ReactHighstock as a root component. One solution would be to render the chart inside the App component and pass the data dynamically:
const getConfig = data => ({
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
class App extends Component {
constructor() {
super();
this.state = {
dataResults: [],
}
}
componentDidMount() {
this.getData();
}
getData = () => {
fetch('your_endpoint_url')
.then(res => res.json())
.then(data => {
this.setState({
dataResults: data
});
});
}
render() {
const { dataResults } = this.state;
const chartConfig = getConfig(dataResults);
return (
<ReactHighstock config={chartConfig}/>
);
}
}
render(<App/>,
document.getElementById('root'));
You should of course handle a use case where the data has not been fetched yet and display a placeholder.
I try to create a custom plugin to store data to use it as global. this is my custom plugin
import {remove} from 'lodash'
export const notifications = {
install(Vue, options = {}) {
Vue.prototype.$notifs = {
count: 0,
notifications: []
}
Vue.prototype.$pushNotifs = ({content, type, timeout}) => {
Vue.prototype.$notifs.count++
Vue.prototype.$notifs.notifications.push({content, type, timeout, id: Vue.prototype.$notifs.count})
}
Vue.prototype.$removeNotifs = ({id}) => {
Vue.prototype.$notifs.notifications = remove(Vue.prototype.$notifs.notifications, (item) => item.id !== id)
}
Vue.mixin({
computed: {
$notifications() {
return this.$notifs.notifications
}
}
})
}
}
when i try to run $pushNotifs methods from my vue template to push some data to $notif.notifications, the template won't updated (but the value its there)
...
methods: {
pushNotifs() {
this.$pushNotifs({content: 'contoh content', type: 'success', timeout: 500})
console.log(this.$notifs.notifications); // has the value
}
}
....
how to make it reactive to the template?
I followed this answer.
Basically, you create a class and use a new Vue instance to provide reactivity.
plugin.js:
import Vue from 'vue';
class Notif {
constructor() {
this.VM = new Vue({
data: () => ({
notifs: [],
count: 0,
}),
});
}
get state() {
return this.VM.$data;
}
get count() {
return this.VM.$data.count;
}
}
const notif = {
Store: Notif,
install (Vue, options) {
Vue.mixin({
beforeCreate() {
this.$notif = options.store;
}
});
},
};
export default waiter;
then to use it (in main.js):
import notif from './plugins/plugin.js';
Vue.use(notif, {
store: new notif.Store()
});
and access it:
this.$notif.state.notifs.push('some notif');
in the template:
<span>{{$notif.count}}</span>
so here state gives you access to all the data, or you can expose individual items as i've shown here.
Recently, I have been searching through to understand the development behind a live search input, the content being an array. In my case, the array is being used to create a file tree. All the code is here: https://codesandbox.io/s/815p3k3vkj
After some investigation and looking through some working examples, the solution seemed simple, but then I understood that I was still confused about it's creation. So, I defined the initial state, but I'm confused of what to do next, to connect the search with the array.
So, I started to do something like this:
export class SearchEngine extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
this.inputChange = this.inputChange.bind(this);
}
inputChange(e) {
const content = e.target.value;
this.props.onChange();
}
static defaultProps = {
onChange: (search) => {
}
}
render() {
return (
<input placeholder="Search the tree..." onChange={this.inputChange}/>
);
}
}
export default SearchEngine;
And here is the array and <FileTree>:
let data = [
{
type: "directory",
name: ".",
contents: [
{
type: "directory",
name: "./bin",
contents: [{ type: "file", name: "./bin/greet" }]
},
{
type: "directory",
name: "./lib",
contents: [{ type: "file", name: "./lib/greeting.rb" }]
},
{
type: "directory",
name: "./spec",
contents: [
{ type: "file", name: "./spec/01_greeting_spec.rb" },
{ type: "file", name: "./spec/02_cli_spec.rb" },
{ type: "file", name: "./spec/spec_helper.rb" }
]
},
{ type: "file", name: "./CONTRIBUTING.md" },
{ type: "file", name: "./Gemfile" },
{ type: "file", name: "./Gemfile.lock" },
{ type: "file", name: "./LICENSE.md" },
{ type: "file", name: "./README.md" }
]
}
];
export class FileTree extends React.Component {
constructor(props) {
super(props);
this.state = {
activeNode: null
};
this.setActiveNode = this.setActiveNode.bind(this);
}
setActiveNode(name) {
this.setState({ activeNode: name });
this.props.liftStateUp(name);
}
render() {
return (
<div className="padd_top">
{renderTree(
this.props.root || root,
this.setActiveNode,
this.state.activeNode
)}
</div>
);
}
}
export default FileTree;
I appreciate all the clarity given in this matter and I want to thank in advance all the help you can provide. I'm a ReactJS newbie and in the middle of new understandings.
Thank you.
Your problem is that you have no defined props.onChange function inside SearchEngine class. If your component depends on prop.onChange being a function and you are calling it directly you have to setup required prop
import PropTypes from 'prop-types'
class SearchEngine extends React.Component {
static propTypes = {
onChange: PropTypes.func.isRequired
}
}
alternatively you can guard your component with
class SearchEngine extends React.Component {
static defaultProps = {
onChange: () => {}
}
}
which will in fact do nothing in case prop is not passed but it will not crash. From your example is not clear what onChange should do but you are not passing it from index.js where you are rendering SearchEngine
EDIT: working solution https://y7p6zlmpyx.codesandbox.io/
I started to integrate a WYSIWYG into a blog project, I'm using Quill for this (I had no experience with it before). I was able to customize my editor the way it was required, what I don't understand is how to deal with text format and embed videos. I have two fields in my post form, "preview" and "content" (two quill editors) while introducing the text I can give format to it (header, italic, underline...etc) and when click the embed video option the editor allows me to add the link and visualize the embed video in that moment. When I press my save button it stores the post in my db but in my single post page I visualize all the fields without format (header, italic, underline...etc) and also no embed video. How can I give format and show the video? Any help would be appreciated.
I read the Quill documentation and tried to understand how to deal with this using deltas but I don't know how to make this work.
I'm using Meteor + React, this is my code (I'll show only relevant code):
This is my lib, quill.jsx
import React, { Component } from 'react';
import QuillLib from './vendor/quill.js';
import { ud } from '/helpers/lib/main.jsx';
class Quill extends Component {
constructor(props) {
super(props);
this.id = ud.shortUID();
}
componentDidMount() {
const that = this;
const toolbarOptions = [
[{ font: [] }],
[{ header: 1 }, { header: 2 }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ align: [] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ color: [] }, { background: [] }],
['video'],
['image'],
];
const quill = new QuillLib(`#quill-editor-container-${this.id}`, {
modules: {
toolbar: toolbarOptions,
},
theme: 'snow',
});
const content = this.props.content;
quill.setContents(content);
quill.on('text-change', (delta) => {
if (that.props.onChange) {
that.props.onChange(quill);
}
});
}
render() {
return (
<div className="wysiwyg-wrapper">
<div id={`quill-editor-container-${this.id}`}></div>
</div>
);
}
}
export default Quill;
This is my input form component, list.jxs
import { Meteor } from 'meteor/meteor';
import { PostSchema } from '/modules/blog/lib/collections.jsx';
import Quill from '/modules/quill/client/main.jsx';
export class BlogCategory extends Component {
constructor(props) {
super(props);
this.state = {
post: {
content: '',
preview: '',
},
};
this.onPreviewChange = this.onPreviewChange.bind(this);
this.onContentChange = this.onContentChange.bind(this);
}
onPreviewChange(content) {
this.state.post.preview = content.getText();
this.setState(this.state);
}
onContentChange(content) {
this.state.post.content = content.getText();
this.setState(this.state);
}
save() {
const content = this.state.post.content;
const preview = this.state.post.preview;
const post = new PostSchema();
post.set({
content,
preview,
});
if (post.validate(false)) {
const id = post.save();
}
console.log(post.getValidationErrors(false));
}
renderCreatePostForm() {
let content;
if (this.state.showForm) {
content = (
<form action="">
<Quill
content={this.state.post.preview}
onChange={this.onPreviewChange}
/>
<Quill
content={this.state.post.content}
onChange={this.onContentChange}
/>
</form>
);
}
return content;
}
render() {
let content = (
<div className="col-xs-12">
{this.renderActions()}
</div>
);
if (!this.props.ready) {
content = <p>LOADING...</p>;
}
return content;
}
}
export default createContainer(() => {
const handleValidPost = Meteor.subscribe('posts');
return {
ready: handleValidPost.ready(),
posts: PostSchema.find({}).fetch(),
};
}, BlogCategory);
And finally my collections.jsx
import { Mongo } from 'meteor/mongo';
export const PostCollection = new Mongo.Collection('Posts');
export const PostSchema = Astro.Class({
name: 'PostSchema',
collection: PostCollection,
fields: {
content: {
validator : Validators.and([
Validators.required(),
Validators.string(),
Validators.minLength(3)
])
},
preview: {
validator : Validators.and([
Validators.required(),
Validators.string(),
Validators.minLength(3)
])
},
}
});
While getting Quill contents by getText, you lost your text format and video information. Using getText, all non-string data will be omitted. Quill data are defined as Delta (which is a JSON object).
You can fix this by updating your onPreviewChange and onContentChange to use getContents instead of getText. Save these Delta to DB and load it again.
onPreviewChange(content) {
this.state.post.preview = content.getContents();
this.setState(this.state);
}
onContentChange(content) {
this.state.post.content = content.getContents();
this.setState(this.state);
}