I have an observable.box and update the values in it using the set() method. Then my component is re-rendered. Did it happen because of this method?
Related
I'm getting very frustrated because there doesn't seem to be a post that solves my issue. In a Parent Component have an array that stores a list of objects, and a method that appends to this list. [for reference here's a snipbit]
In the render method of my parent component, I pass this method as a prop to my child component.
[line 79]
https://i.stack.imgur.com/fStiF.png
And my child component tries to call said method, in it's render()
in render's return, child component
https://i.stack.imgur.com/crN9T.png
However for some reason I get an Error this.props.addPart is not a function
Complete Code:
WaitlistTable.js 1-34
WaitlistTable.js render 34-56
CustomerAdd.js 1-35
CustomerAdd.js call to addPart in render
Make your addPart function an arrow function
like this
addPart = (..,..,..) => {...}
I am using the mixins function in the vuejs to code efficiently.
And then, I had a question.
I have imported mixins 'TTS' in the parent component.
And then the child component called the function of the tts.
However, the function was not called.
Is the parent component mixtns function not available in the child component?
import { tts } from "../components/mixins/tts/tts";
export default {
mixins: [tts]
}
This is importing mixins in the parent component.
<ion-row
class="drawer_middle_menu ion-align-items-center ion-justify-content-center"
#click="trySpeak($t('timeOut'))"
>{{$t('timeOut')}}</ion-row>
And this is a child component.
The 'trySpeak' function is a function in TTS that was imported by the parent component.
No, you would need to either pass as a prop or import directly into child component. With that said there are not recommended ways such as $parent but I would stay away from that.
See here for more info:
https://v2.vuejs.org/v2/guide/components-edge-cases.html
I have a Vue component that's used multiple times with identical props. I'd like to keep the code DRY by always adding these props in a single place.
Example:
<wrapped-foo bar=1 />
should be extended to
<real-foo bar=1 spam=eggs />
I'm trying to solve this using a wrapper component that takes the props given, modifies them, and passes them to the wrapped component. There are multiple tutorials on how to do this, e.g.
vue wrap another component, passing props and events
https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components
It looks like all of the solutions don't pass at least one of props, class, style, event listeners, other attributes, etc. to the wrapped component. Is there a solution that keeps all of these intact?
You can do it with Vue Mixins: https://v2.vuejs.org/v2/guide/mixins.html
Or simply with inheritance:
Example:
const wrappedFoo = Vue.component('real-foo').extend({
props: {
spam: ...
}
})
Vue.component('wrapped-foo', wrappedFoo)
I am using react native.
Here's my code.
function mapStateToProps(state) {
return {
markers: state.markers,
};
}
I set props using mapStateToProps and it only called when I dispatch an action.
I can set state using setState({..}); like this.
Here's my question.
How can I set props? Is there anything like setProps({..})?
It seems like you're using Redux. If you do, make sure to have both reducer and action scripts. The reducer is used to get a value from a specific state property or properties.
You have to define a function in your action script to assign or set a value to your specific state property and properties. You also need a store to bring both reducers and actions together.
The store initializes everything and allows you to dispatch actions and set or get values.
Two common ways of passing the props.
From Redux Store
Like what you have done in your code.
From other Components
Props can be passed by
<Foo prop1={bar} />
And in your Foo Component the props of prop1 is whatever bar is.
This is more of a performance/best practice question.
I currently have a child component that needs to alter state of it's parent and run an AJAX request on the parent. When the TouchableHighlight is pressed, the child scene needs to change back and the parent state needs to change/execute ajax request.
I'm using React Native Router Flux for my navigation.
Is the best way to accomplish this to pass the needed state changes through props back to the parent e.g. Actions.feed({foo:bar}) ?
Or can I pass a parent method through to the child via props and execute that from the child? That method would update the parents state.
The problem I'm having with that approach is that I cannot alter the parent state and change scenes at the same time as the parent is still mounting and you cannot setState on a mounting component. Is there someway to do this with a Promise from the parent method that can be returned once the setState has completed at which point I can change Scene? Not sure how to do this or even if it's the best method.
Any help would be appreciated.
The general practice is to provide a callback to the child component. For ex:
export default class Child extends Component{
render(){
return (<TouchableHighlight onPress={this.props.onItemClicked}>
....
</TouchableHighlight>);
}
export default class Parent extends Component{
.....
onItemClicked(){
//ajax request, set state
}
}
An improvement over this would be fire off a Flux action. You can do that in the child component if you don't intend to make it reusable or if you want it to be reusable fire off flux action in the parent component callback.