I've been learning Vue, and one thing that I'm struggling to understand is how can I edit information across two separate components.
I have a background in PHP, so setting a global variable would be one way to accomplish this in that. But with Vue, I'm not entirely sure.
For example:
Say that Component1 creates a text box that shows a value of "dog" somewhere on the page. And from Component1 you can update and change that value through input fields.
Later, say that Component5 also has an input field that needs to change that text box's value to "cat."
If these two components are separate, and Component1 is controlling that original value, then how can Component5 access that value, update it or manipulate it?
Essentially, what's the best way to handle a piece of information that needs to be accessed/changed from multiple different components or pieces of the Vue application?
Probably the best way will be to use Vuex. It provides a store, where you can add all data which you need in multiple components.
https://vuex.vuejs.org/en/intro.html
Related
I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
I am building an app using vue.js and I have a simple question. Im trying to transfer a value between two componenets which are not related to each other. What I actually do is that I have a chart and when I click on a point, I am assigning the points date to a var and trying to transfer it to the second component and give it to the datepicker. So the main question is that if it is possible to take a value ,which is different depending on the point clicked, and transfer it to the second vue component.
Thanks in advance!
Try passing the value as a prop: https://v3.vuejs.org/guide/component-props.html#passing-static-or-dynamic-props
If you need the prop to be reactive: https://v3.vuejs.org/guide/data-methods.html#data-properties
And please do not use var, use const (for variables that should not change reference) or let (for variables that may change references).
I'm using Vue and I wonder if I have a list of components (50 button with the very same function within each one of them) - will Vue recognize it as a repetetive code and reduce to one function that all those 50 button will use or each one will compile it's own function while bundling?
will Vue recognize it as a repetetive code and reduce to one..
No. Vue will not scan your code for similar code and try to optimize it.
However, when Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.
Maybe this is what you are confused with? This is not the same as the question you are asking, but the closest thing vue would do "magically".
If you have 50 similar buttons, I would advice you to rather take advantage of props, slots and slot scopes to only have one button component that you can tweek in place where you need them to be different. 50 alike buttons sounds like a bad pattern.
I'm writing an app in Vue and I have a really hard time understanding the component hierarchy, namely the parent-child relationships and how to pass data around.
I have a view that contains a map which in turn has some navigation controls and options that are overlayed on top of the map. Now, I want these controls to manipulate the map WITHOUT having to nest the buttons inside the actual maps as it will cause severe display issues (for example, clicking on a zoom button falls through the button and also clicks the next element under it).
My app looks like this:
Mapview
Map
Controls
Options
Optionpanel1
Optionpanel2
...
Now, a HTML input element in Optionpanel1 needs to control something in the Map, which is not actually it's parent component. Also, some data from Map needs to be passed down to Optionpanel1 so it would know what to control. To make matters worse, something in Options also needs to pass something down to Optionpanel1, so, even though event bus would allow communication upwards, it would not solve that I need to pass data from parents to indirect children and also components that are not it's children.
I can actually pass the required property down the line if I nest the Options inside Map and pass it down with :myProp="prop" and then in Options, declare it in props and bind to Optionpanel1, where it is again declared as a prop. But as I mentioned earlier, nesting elements that I do not want to be nested in a visual sense causes massive issues like mouse click falling through. Do elements even need to be nested inside eachother in order to define parent-child relationship?
I would want components to exchange read-only data without Y being a child of X in the DOM. Also, even if nesting components like this would not cause visual issues, does it not seem very annoying to have to register and bind it in every component along the way?
I don't understand why is it so difficult to simply read something from another component. It's starting to seem that Vue is causing a problem that it's supposed to solve? Am I missing something here or am I looking at this in a completely wrong way?
Thanks in advance.
Basically you have 2 options to control complex components:
Handle the actions in your so-called "smart component" (in terms of React), which is the common ancestor for the controlling and controlled components. It's a pretty good solution for small components, but that's not the case.
To separate common logic and data in a Vuex store. I'd recommend you doing this.
I get all the concept of components but one thing I am stuck at is - when to create a component? In other words, what part of the page should be a component?
Link to sample problem image
Taking above image as example, what I think is progress bar can be one component and form, quotes list, blue alert can be second component.
Please advise as necessary.
There can be many reasons for creating components, such as when you need to create a reusable element, splitting the code to make it easier to understand and reduce code complexity.
In your case 1. you can put both of the sections into a single component or you can put them into separate components if you want to reuse them somewhere. 2. if your code is too much and you want to make it simpler to understand in that case you can also create separate components.