I have a modal component with textarea which I use to edit data that's in my main instance. So the idea is when I open the modal component, the textarea should be showing current data value from the main instance, this can be done by passing data as prop to the modal component. But since it's prop, vue doesn't allow me to edit it in textarea. And if I use v-model for the textarea, how do I get the original data value the moment my modal popup?
Back in 1.x, I just need to add "two-way: true", but this approach depreciated in 2.0.
pass myProp object as a prop and on the text area you pass v-model="myProp.cellModel"
Related
I have a dialog with elements that I want to access before it is visible to the user. However, the dialog contents (Vue component) are only accessible to Vue once the dialog is visible. Is there a way to ensure the elements within my component are rendered to DOM before it is visible?
I have tried variations of nextTick and forceUpdate with no luck.
elements that I want to access before it is visible to the user sounds like you are probably doing something in "not Vue way" but sure, you can have your component rendered in DOM but still not visible by using v-show
I am currently working on a project that has a component structure like follows
Parent component that contains items
This component has a v-for over this.items.
That v-for has a
ChildComponent contains a form that modifies properties of this.item via v-model for each property.
I was expecting, since VueJS does not support 2 way databinding by default, that ParentComponent would not be aware about changes that I make in ChildComponent.
However, since my ChildComponent is a modal dialog, I can see the changes that I make in ChildComponent are reflected in ParentComponent.
As much as I like what I see, I don't understand it...
Could someone shed a light on this for me?
Is it possible in VueJS to have a default click event on a custom component?
E.g. we have built a component called editable. Now on click, we always want it to fire the same function, no matter where we call that component.
<editable #click="doSomething" ...></editable>
Can I define that somewhere in the JS side?
In case of custom component, you need to bind to native event:
<editable #click.native="doSomething" ...></editable>
For documentation, refer to Vue.js docs here.
I have a form built with Vue with a hierarchy of components using v-model to bind the data to the model.
Now I want to fill the form programmatically. If I just update the model (data) of the top component, it has no effect on the child components since this only changes their props.
Here's an example:
https://jsfiddle.net/eywraw8t/411545/
When you click the 'Set to 2018-Oct' button, the model on the myApp is updated, but not the model of the <mydate> component.
Is there a way to achieve filling the form without adding watchers to value props (which the official guide doesn't suggest) on all components in the hierarchy?
I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.