Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have created a component called dynamicTable which accepts a config as a prop
so on my sample.vue file which is the parent
<template>
<div>
<dynamicTable :config="config"></dynamicTable>
<el-dialog title="modal" :visible.sync="modal">
<dynamicTable :config="modal_config"></dynamicTable>
</el-dialog>
</div>
</template>
so the problem here is the dynamicTable that is not in the modal gets the configuration of the dynamicTable on the modal.
what i want is that each dynamic table has its own cofiguration without affecting the other
Your problem is probably not a general component prop problem.
This should run OK for any prop inside any custom-component:
<template>
<div>
<custom-component prop="A"></custom-component>
<el-dialog :visible.sync="modal">
<custom-component prop="B"></custom-component>
</el-dialog>
</div>
</template>
So my guess is that your problem is on creating / updating config and modal_config.
My personal favorite way to check data values in real-time is by using Vue.js dev tools for Chrome or Firefox.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
i have two component, component A check Internet access and change connection state.
Component A
now i want pass "connection" state to B component and setstate there with a
a new state...
Component B
now
Since network state is used throughout the app, it's better to warp it at the root level.
And use Context to pass the props.
Here NetworkStatusContext is used to pass network state to child components.
<NetworkStatusContext.Provider value={isConnected}>
<App />
</NetworkStatusContext.Provider>
Then you can get the network state at any component.
<NetworkStatusContext.Consumer>
{isConnected =>
(!isConnected ? <ErrorMessageComponent/>: <SomeComponent/>
)}
</NetworkStatusContext.Consumer>
For above question!
Passing props from Component A -> B
render(){
return(
<ComponentB
connection={this.state.connection}
/>
);
}
In component B you can access props as:
render(){
const{connection}=this.props;
.....
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
i have created 3 pages, first page is navigating to second page and second page is navigating to 3rd page, how ever when i click back button it is navigating to previous page but its not giving last history intead of its reloading the page,
This is normal as the previous component's instance is destroyed. You can console.log in each lifecycle hook to see which hooks are called when a route is entered and exited.
To prevent this behaviour and cache your route's component you can wrap the <router-view> inside <keep-alive>
<keep-alive>
<router-view></router-view>
</keep-alive>
You can even pass include and exclude props on <keep-alive> to manage which component to or not be cached
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I have a drop-down.vue component like this:
<template>
<div #mouseenter="handleEnter" #mouseleave="handleLeave" #click="handleClick" v-click-outside="hide">
<slot name="dropdownBtn" :visible="visible" ></slot>
<slot v-if="visible" name="dropdownWrap" :visible="visible"></slot>
</div>
</template>
...
it's a drop down component, then click or hover the dropdownBtn the dropdownWrap will apear/disapear.
now i have another component need the dropdown, so i can use the dropdown in two way:
first： use nested component
<template>
<ui-dropdown>
<div name="dropdownBtn">...</div>
<div name="dropdownWrap">...</div>
</ui-dropdown>
</template>
...
second: use extend
<template>
<!-- the handleEnter and handleLeave are extend from the dropdown component -->
<div>
<div class="btn" #mouseenter="handleEnter" #mouseleave="handleLeave">...</div>
<div class="popup" #mouseenter="handleEnter" #mouseleave="handleLeave">...</div>
</div>
<template>
<script>
import dropdown from '../dropdown';
export default {
extend: dropdown,
...
}
</script>
i think the first is better. but the second has one less component than the first, the performance will be better?
who can tell me which is better?
Both ways work, and I can't really say that one way is correct and the other isn't, it depends on your requirements.
Extend
Extending a base component can get hairy if you want to modify the base component's template in some way (you can't really modify part of the base component's template, you either keep the base template or completely redefine it).
You need to make sure that the new template adheres to any requirements that the base component needs for it to work correctly (such as the presence of certain refs, using correct CSS class names, etc.
The base and extended components are tightly coupled.
Composition
I'd say this is more the "Vue way".
You can take advantage of slots.
There's no tight coupling between the child and parent components; they're completely separate. You can modify the child component's code as much as you like as long as its interface (props, events, slots, etc) are unchanged.
A disadvantage could be that the parent component is a completely separate component from the child; it won't inherit any props, events, slots (anything) from the child component.
You might want to have a look at functional components if you're concerned about the overhead of having an extra component with the composition approach.
I rarely extend components, but when I do, it's because I want to share a common blueprint for a set of related components (the base component isn't usually functional on its own, I've just extracted the common code out).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
An Interviewer asked this question in selenium webdriver
Please let me know the answer of this question
Thanks
Srinu Marri
Tags
are HTML elements, like
<div>, <ul> , <p> , <h1> , etc
Id's
are ATTRIBUTES of tag names. For example:
a <div> tag can be given an id:
<div id='firstdiv' >
or a class name:
<div class="firstdiv">
ID
Identify uniquely HTML elements. Even if you add more than one ID inside a html page, the DOM object will render all elements even with the same ids, but if selected by JavaScript or selenium only will select the first one that is rendered.
E.g:
findElements(By.id("id"), Selenium will return an element with this id attribute that are present immediately after the page loads.
tagname
Works just like class elements. Can identify a element behavior or even a constant markup. The DOM object can handle with multiples elements and even scripts tags.
E.g: findElements(By.tagName("table"), Selenium will return an array of all the tables that are present immediately after the page loads.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I used an image in my nav bar as a logo. The careousel below the navbar is blocking part of the logo like this. How do I bring the image to the foreground?
Here it the short version of the navbar code:
<!--Navigation Bar
================================================== -->
<div class = "navbar navbar-inverse navbard-static-top">
<div class = "container">
<!--Logo-->
<div class = "navbar-brand" style="color:#00E6E6" pull-left><strong>
<img src="resources/logo-navbar.png" class="logo-navbar"/>
<strong>
</div>
</div><!--End Navigation Bar Container-->
</div><!--End Navigation Bar-->
There's a typo in your navbar class. 'navbard-static-top' should be 'navbar-static-top'. Thats the problem. :)
I found this answer when I was searching for fixed navbars, so just modified it to match this answer. Correct the typo and you'll see the result.
http://www.bootply.com/BFQxiF039t