So, I'm trying to understand code written by someone else and there's one thing I haven't figured out. Why would you use colon in an emit-name?
Here's an example:
this.$emit('update:compare', { key, values })
The problem is that I can't find the component listening to this emit. I've been looking for v-on:update:compare="" and #update:compare="" but I can't find it. What does the colon even do?
I've found this other thing in the same component as the emit that I don't recognise either:
model: {
prop: 'compare',
event: 'update:compare',
},
And I guess it has something to do with it but I can't figure it out.
Would anyone be so kind to shed some light on this for me, please?
Just to be specific re. documentation in link in comments above (which is worth reading), you can add .sync to a v-bind in order to allow props to be passed back "up" to the parent automatically (2 way binding). I wasn't aware of this either until I started delving into the vue query builder library and had exactly the same problem as OP. https://github.com/dabernathy89/vue-query-builder
<some-component :someData.sync="someData" />
// Inside component method:
this.$emit('update:someData', "New value");
Related
Im new to VueJS.
I'm trying to understand the syntax behind emitting events.
There is the following video tutorial where I'm having problems understanding what happens:
https://www.youtube.com/watch?v=5pvG6fzkdFM
Here is the code:
Inside parent:
https://imgur.com/bxcyjZq
https://imgur.com/Rynifqq
And Child (emitting component):
https://imgur.com/iHh3zc3
Now, the first thing I very much DONT understand is how the "v-on:CustomEvent" actually works.
v-on, as I understand it, attaches an event handler. But it doesnt specify it, does it? I usually have to type "v-on:click". So why does anything happen at all in this tutorial when this code is executed? Nowhere is there a definition what kind of event shall trigger the function.
And the second thing is how the data is handled.
In the header, inside the parameter of the function, $event is handed over.
But how is this supposed to give any useful data? The event usually is an object where I have to get the payload extracted manually, like event.target.value?
So why does this work?
You code looks fine, there is no fix needed
Alternate way is, no need to mention $event, it automatically pass with the arguments by just mentioning the method name
<app-header v-bind:title="title" v-on:changeTitle="updateTitle"></app-header>
Stackoverflowers, I'm a newbie of vue.js, I try to implement a binding effect which can enable the changing of binding created by v-model. To put things clear, I give an example as following:
<codemirror ref="outputCm" v-model="output" :options="cmOutputOptions"></codemirror>
Here we have a codemirror element, it's content is binded with variable output, is it possible in some place after I changed output to some-variable, its content now is binded with some-variable? I tried to use assignment, it didn't work. And I tried my best to google, but I'm still disappointed. If anybody know how to give this a shot, I'm appreciated.
yes you could make it but from your data object
data: {
output: (your logic here)? some-variable : 'some thing else'
}
I've been breaking my head over this for the last few hours and no matter where I look I can't seem to find the answer.
I'm using vue2-frappe as my chart library. I'm using a simple bar chart to display certain values by day. Everything was fine until my higher-ups decided they wanted to show a whole year's worth of values on this chart, meaning I have to add some pagination to it.
The problem is, now I can't figure out how to make the chart rerender. I've tried replacing the entire object I've bound the chart to, as well as manipulating specific values, but nothing seems to make the component rerender.
In the documentation for frappe.js, you can modify data via specific methods, but this being Vue I can't just call chart.update() like in normal .js. And if I inspect the component via vue dev tools, I can see it contains the modified data, it just doesn't redraw itself.
Anyone have an idea what to do?
I would try to force update the view component.
VueJs reactivity can sometimes be confusing where you think it should react to changes but it doesn't.
You can force a view update like so:
// Globally
import Vue from 'vue';
Vue.forceUpdate();
// Using the component instance
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate(); // Notice we have to use a $ here
// ...
}
}
}
You can read about correct ways of re-rendering here: https://michaelnthiessen.com/force-re-render
There are caveats to this approach as outlined in vueJs's docs: https://v2.vuejs.org/v2/guide/list.html#Caveats
Note #
A force re-render wont update computed values, but your computed property shouldn't contain any external non-reactive variable anyway.
Note 2
The above article written by Michael Thiessen also states the best way in his opinion is key-changing which I think we all should be aware of.
I hope this puts you on the right track. It sounds like (with limited information) you could be replacing the data but using the same key.
I am trying to access data from a single-file component in Vue, but can't find any way of doing it. I have tried using $emit, but can't get thath to work either. The data string has to be blank as it gets modified by an input field.
I have seen others' solutions here on SO, but either the don't fit with my problem or I can't get them to work. I want to try to keep it as simple and understandable as possible.
You can use the special attribute ref:
<child-comp ref="child"></child-comp>
In JS:
vm.$refs.child.YOUR_DATA
Hope this helps!
I'm working on adding swipe to remove functionality to an app we are developing. For reasons we are not using an external library to handle this, so I am writing it myself.
In my project I have a container where I keep state. I use setState to update the state, and am passing state down to this child component as a prop. In the component below, componentWillReceiveProps is called with the correct value updates when they happen, but the child component of this is not receiving updates to its props. If this doesn't make enough sense or you need to see more code let me know. I've only included the parts of code that I feel are relevant since this is a private project.
constructor(props) {
super(props);
this.renderWishlistRow = this.renderWishlistRow.bind(this);
}
renderWishlistRow(product) {
return (
<WishlistRow
item={product}
onItemPress={this.props.onItemPress}
onRemoveAction={this.props.onRemoveAction}
shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
onScrollAction={this.props.onScrollAction}
itemPressed={this.props.itemPressed}
onEndScroll={this.props.onEndScroll}
/>
);
}
Then, inside the render function:
return (
<KeyboardAwareListView
dataSource={this.props.dataSource}
renderRow={this.renderWishlistRow}
renderSeparator={renderCardDividerAsSeparator}
onScrollBeginDrag={this.props.onScrollAction}
scrollEventThrottle={16}
onScrollEndDrag={this.props.onEndScroll}
/>
);
Thanks in advance for any help.
EDIT:
I am setting state in the parent component with this code:
this.setState({
shouldCloseRemoveButton: true,
});
I didn't originally include it because componentWillReceiveProps is being called with the correct state changes from the parent component.
EDIT 2:
My App Hierarchy for this part of the app is as follows:
WishlistContainer: contains the setState calls and passes as a prop: shouldCloseRemoveButton={this.state.shouldCloseRemoveButton}
Wishlist: passes props to its child WishlistRow: shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
WishlistRow: Continues to pass the props down as above, but componentWillReceiveProps is not called here, props are not updating at this level.
I'm not going to mark this as answered, because I want a real answer and what I did to work around this is not good enough for me.
That being said, my workaround was to move the piece of state I was trying to propagate into react-redux. Setting the redux state to contain what I needed using mapDispatchToProps, and then connecting the components that actually needed the state down the line using mapStateToProps, allows the components to receive the notifications they need to do their thing.
Again, I am not choosing this as the answer - even though it is what I did to solve the problem - because something else fishy is going on somewhere and I would like to see if anyone knows why things didn't work as they were.
EDIT
I've run into this issue other times since this originally happened. There is a prop that exists on the Flatlist - This is not the original component I used in the question, but the original component is deprecated now and the Flatlist has the, about to be mentioned, prop for this scenario - called extraData. This particular prop is also watched to help the Flatlist determine if it should rerender itself.
Since the ListView has become deprecated, I feel that using a Flatlist and making sure you pass in an extraData prop - assuming you have a different prop that will change with your list data changes - is an acceptable answer to this problem.