I've started using VueJS a month ago. I've watched many tutorials to learn the language, but generally I never see developers using the DOM methods such as getElementById or getElementByClassName to make manipulations onto an element that is inside of a component or inside a view.
I'd like to give an example to make my statement more clear.
For example lets suppose that we have a nested component called UsernameInput that is an input[type="text"].
Instead of having to pass the value through the #input directive, we could get the value from the parent using the document.getElementById(/* Id Of The Input /*).value . I know that Vue uses the Virtual DOM for the rendering to make it faster. But does using VanillaJS affect it in any sort of way? And why is it so rarely used in front-end frameworks
Related
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
I was hoping I could get some feedback on something I'm working on. I'm building an application that is essentially a bunch of data tables. Part of my requirement is not to use any additional frameworks (vuetify) or any type of store (vuex).
Currently, my application is constructed as follows:
API call upon creation of app
That data get's passed into a component where I would like to do all my searching/filtering
From there the next component is built specifically for Pagination
Then to the component that builds the data tables.
My question is, since I have this top down approach, how do I build both the search and filter functionality to where I don't have to pass anything back up to the parent components?
I am using scoped slots to pass/inject data into child components. My first thought was that I would have a computed property that returns an array in the control component and then pass that down to the pagination component, which works, but how do I also use that same array if I want to be able to filter results and also search filtered and none filtered items? Essentially to be able to mock the functionality of some of the Vuetify tables.
I assume you don't want to pass data/prop-drill between 3 component layers?
You can use provide/inject.
You can provide a "setArrayData" method to the child components (2 and 3 levels deep) and also provide "arrayData" data property.
You can also an event bus (see vue docs). In Vue 2 an event bus is built in, in Vue 3 it's not.
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 being using Vue.js for some months and it's have been reminding the webforms paradigm, that you used components to make a website or webapp, but with Vue.js it's a pleasure to create such things and not a whole nightmare it was with webforms.
Well, my question is if it's possible making nested components just to define some behavior on it's parent on a markup-way. Example:
<grid prop1="somevalue" prop2="somevalue">
<grid-column prop1="somevalue" prop2="somevalue">
<filter-options prop1="somevalue" prop2="somevalue">
</filter-options>
</grid-column>
</grid>
So, a particular grid component have column and the column hava a filter options.
Don't want to depend stricty to the javascript code.
Thanks in advance
EDIT: Just to add that the childs-component must not have a template. They are just to pass some props to the parent.
To answer your question
if it's possible making nested components just to define some behavior on it's parent on a markup-way
And to keep in mind your request:
Don't want to depend strictly to the JavaScript code.
The answer is no, it is not possible. Components underneath the parent can only push (emit) data to the parent after the DOM loads. So you would need to push a value that would trigger some JavaScript if you wanted to alter the html. Using JavaScript would be the only method though.
To achieve what you are asking I think it makes a lot more sense to use props on the parent component. You have a lot more flexibility and you can make it very versatile.
I've got an existing SPA that was developed using nested RactiveJS components. Which is great, and offers a ton of flexibility throughout the entire app. Currently I attempting to add in client side routing support using page. My navigation switches out high-level components using simple {{#visible}}{{/visible}} template markup on each component. This is a little troublesome in its current state as it always kicks off a re-render whenever the high-level component becomes visible again.
Is there a way to render a component, for example, called widget, without using the
<widget></widget>
method? I've already "registered" the component with the parent, but obviously when constructing it by means of
new App.components.widget
I am able to control how/when it's rendered/inserted/detached, but lose the recognition in the application's component hierarchy.
There is insert exactly for that. You don't even need to "register" it to the component you plan to put it to. You can use the different find* methods or nodes to easily retrieve a reference of your planned container element.
var instance = new YourDetachedWidget({ ... });
instance.insert('#your-container'); // This could be a node, selector or jQuery object