Is there any way to hide the main div in a Vue app that is builded by Vue-CLI? I have tried appending display property but it didn't resolve the issue. I am trying to hide it inside the Channels component of mine. My main component looks like this :
<template>
<div id="app">
<Channels/>
</div>
</template>
<script>
import Channels from './components/Channels'
export default {
name: 'App',
components: {
Channels
}
}
</script>
You can use <template> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<p>
Am I wrapped around Div or Template?
</p>
</template>
</div>
<script>
new Vue({
el: "#app"
})
</script>
You can inspect the parent of p tag in developer tools. It is div instead of template
you mean <div id="app">?, you can delete it directly, but you should maintain that three is only one root in <template>
Related
I'm a bit new to the component's world and trying to figure out a thing, how the parent child relationship works in components. I've seen some examples of some component libraries where they have some parent child components to be defined and those are used as the child components. For example, table and tr:
<my-table> <!-- Parent -->
<my-tr> </my-tr> <!-- Child -->
</my-table>
Now, I assume, that child works for parent via slots. So the parent should be defined something like this:
<template>
<div>
<slot></slot>
</div>
</template>
Now the parent element can have multiple <my-tr> as well. And slot should be rendering all of those. However, I am trying to a similar thing but a little more complex than that.
I am trying to create a slider with this approach. Where there is a my-slider component and my-slider-item components used to define inside my-slider component. And then I want to control the visibility of the child components defined in the parent component slot by modifying it's properties.
It should be looking like this:
<my-slider>
<my-slider-item>Item 1</my-slider-item>
<my-slider-item>Item 2</my-slider-item>
<my-slider-item>Item 3</my-slider-item>
</my-slider>
my-slider component
<template>
<div class="my-slider">
<slot></slot>
</div>
</template>
my-slider-item component
<template>
<div class="my-slider__item">
<slot></slot>
</div>
</template>
Now how can I know in the parent that how many <my-slider-item> are defined in the parent slot and based on that I want to control the visibility of the child 1 at a time as it is going to work as the slider.
I'm not sure but I missing some basic concept here which I was not getting after looking at tons of example since yesterday. If anyone can please help here? Thanks a lot!
The parent-child relationship is actually established by importing the child component into the parent component, and including the child in the parent's 'components' option.
I created an example scenario with simple Parent and Child component definitions in order to show a standard relationship implementation. Built with Vue 2 and the Vue CLI.
MySlider.vue (parent)
<template>
<div class="my-slider">
<h4>My Slider</h4>
<my-slider-item v-for="(item, index) in sliderItems" :key="index" :sliderItem="item" />
</div>
</template>
<script>
import MySliderItem from './MySliderItem.vue'
export default {
components: {
MySliderItem
},
data() {
return {
sliderItems: [
{
name: 'Slider Item 1'
},
{
name: 'Slider Item 2'
},
{
name: 'Slider Item 3'
}
]
}
}
}
</script>
MySliderItem.vue (child)
<template>
<div class="my-slider-item">
<h5>{{ sliderItem.name }}</h5>
</div>
</template>
<script>
export default {
props: {
sliderItem: {
type: Object,
required: true
}
}
}
</script>
I have two components.
The first one is a header with an image.
The second one is a div with a list.
I need to click the image (in the first component) to show the list (second component) and click it again to hide it.
The div should replace all the content below the image (so I can click the image again to hide the div and show default content).
Please see the picture for details. Links to the code below.
The code:
Component with the picture which has to work with v-on:click
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-header.vue
Component which supposed to appear/disappear when I click the picture in component 1
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/menu.vue
Component which supposed to be shown by default, but disappear or being covered by component 2
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-page-content.vue
App.vue
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/App.vue
And main.js
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/main.js
You need to read up on on click handlers in Vue, and binding the v-dom to data variables.
Here's an example:
JS:
var vue = new Vue({
el:"#app",
data: {
isShowing:false,
}
})
v-dom:
<div id="app">
<iframe v-show="isShowing" src="http://www.weather.gov/"
frameborder="0"
></iframe>
<button #click="isShowing ^= true">Click Me</button>
</div>
Demo: https://codepen.io/michael_coder/pen/WReNNm
var app = new Vue({
el: '#app',
data: {
Hide: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="Hide = !Hide">Click Me</button>
<div v-if="!Hide"><ul><li>One</li>
<li>Two</li><li>Three</li><li>four</li><li>five</li><li>six</li></ul></div>
</div>
I'm quite new in Vue.js. I do some simple exercises about communication between Vue components. But I still have a problem who is a child and who is a parent. For example I have this code:
HTML:
<body>
<div id="root" class="component">
<coupon #applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"
/>
<!-- <script src="app.js"></script> -->
<script src="main.js"></script>
</body>
VUE.JS:
Vue.component("coupon", {
template: `
<div>
<input palceholder="Put your name" #blur="onCouponApplied"/>
</div>
`,
data() {
return {
message: ""
};
},
methods: {
onCouponApplied() {
this.$emit("applied");
}
}
});
new Vue({
el: "#root",
methods: {
onCouponApplied() {
alert("that's work!");
}
}
});
So.. here I have component coupon and new Vue. I guess that the new Vue is a parent. But... I try to understand, how it is work. Can anyone explain to me very simply how it works? I read the vue.js documentation, but still have a problem :/
All components refer to the Vue instance you mentioned. So your coupon component is a child of your root div. The parent component is the component that embeds another component.
A "UserListView" would have a list component which embeds user components. The view is the parent of the list and the list could be the parent of the user components.
Your whole app consists of components. Every Vue app has at least one component that is the parent component (Vue instance).
Every other component that you make becomes either direct or indirect child of the Vue instance.
From official docs:
A Vue application consists of a root Vue instance created with new
Vue, optionally organized into a tree of nested, reusable components.
The root div is the parent. You are creating a new Vue instance ( new Vue({ ) and associating it with the div element tagged with an id of 'root' ( el: "#root", ). The coupon component is contained within this div element, making it a child.
In my JSFiddle example, I'm trying to define a custom Vue component: https://jsfiddle.net/50wL7mdz/402951/ .
Unfortunately, nothing is rendered. Why?
The code:
HTML:
<script src="https://unpkg.com/vue"></script>
<blog-post title="hi again!"></blog-post>
JS:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
You forgot to create a Vue. Wrap the <blogpost> component into a div and create a Vue using that div as the template.
Like so
HTML:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<blog-post title="hi again!"></blog-post>
</div>
JS
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
el: '#app'
});
Look at the documentation documentation
Here is the working fiddle
My friend I recommend you another option, that I preferred. Please use, if you want, sandbox where you can add or modify components much much easier.
Here is the sandbox link.
I have actually 2 global components one for Admin and other one for Modal. The Admin component have a child comp called Page and the Page comp have others childs. I want to pass content directly to Page comp via slots. Like this:
app.js
new Vue({
el: '#app',
components: { Admin, Modal }
})
Admin.vue
<template>
<div>
<page>
<slot></slot>
</page>
</div>
</template>
export default {
components: { Page }
}
Page.vue
<template>
<div>
<page-header>
<slot name="page-header">
<h1 class="page-title">
<slot name="page-title">
Page Title
</slot>
</h1>
</slot>
</page-header>
<page-body>
<slot>
Page Body
</slot>
</page-body>
<page-footer>
<slot name="page-footer">
Page Footer
</slot>
</page-footer>
</div>
</template>
export default {
components: {
pageHeader,
pageBody,
pageFooter
}
}
index.html
<admin>
<div slot="page-header">
Header Test
</div>
Body Test
<div slot="page-footer">
Footer Test
</div>
</admin>
I don't need to use Page as global component, Please any idea?? Hope you understand what I'm looking for...
Thanks
I don't think slots are designed to do this. If you need data to be persisted between parent and children then use either props as #Belmin Bedak suggested. When you pass a prop to a component it will be available to all its children.
If you need to persist state on front-end I strongly recommend using Vuex as source of data for all components ( only use if it becomes more complex to have data scattered across components ).