I am using kendo native calender for my project. I want to show months in calendar.
<template>
<div id="vueapp" class="vue-app">
<div class="example-config">
Number of rendered views:
<numerictextbox
:style="{ width: '230px' }"
:min="1"
:max="10"
#change="handleInputChange"
:value="views"
>
</numerictextbox>
</div>
<calendar :views="views" />
</div>
</template>
I need display like this.
Related
While I was reviewing headlessui's menu component, I saw the use of 2 components that are nested like the following: (see: https://headlessui.dev/vue/menu)
<template>
<Menu>
<MenuButton>More</MenuButton>
<MenuItems>
<MenuItem v-slot="{ active }">
// some content
</MenuItem>
</MenuItems>
</Menue>
</template>
So as you may see, there is a MenuItem component inside of the MenuItems component. And I need something similar to that so I can use a template and put another component's result into that template.
Here the example of what I am trying to do:
<!-- HeadingComponent.vue -->
<div class="group">
<div class="head">
{{ title }} <button>Create New</button>
</div>
<div class="content">
<!-- I want to put some component's rendered content here -->
</div>
</div>
And this is, let's say, a page where I want to use the common component.
<!-- Blog.vue -->
<HeadingComponent :title="Posts">
<BlogPostsComponent :post="someArray"/> <!-- Some other component which may vary -->
</HeadingComponent>
The question
What kind of changes do I need to do in the component HeadingComponent.vue so it works as I expected?
Slots are a good way to add a component to another or even simple html
docs : https://fr.vuejs.org/v2/guide/components-slots.html
<h1>Vue JS Slots Application</h1>
<div id="app">
<slots>
<template slot="slotA"><pre>Slot A Content from parent.</pre></template>
<template><i>Parent Component Content.</i></template>
</slots>
<hr/>
<slots>
<template slot="slotB">Replace Slot B Default Content</template>
<template><b>Replace Default Slot Content.</b></template>
</slots>
</div>
<template id="aside">
<div>
<h3>My Slots App</h3>
<slot>Default Slot Content</slot><br>
<slot name="slotA"></slot><br>
<slot name="slotB"></slot><br>
</div>
</template>
Example of codepen :
https://codepen.io/brian_kim/pen/NpWKGe
Just in a short time, I found something like slots in VueJS which is definitely what I was looking for.
Here is the guide page:
https://v2.vuejs.org/v2/guide/components-slots
What I did in my problem is that I put <slot></slot> tags inside div whose class is content, and then the last sample I gave (Blog.vue) has worked.
<!-- HeadingComponent.vue -->
<div class="group">
<div class="head">
{{ title }} <button>Create New</button>
</div>
<div class="content">
<!-- I want to put some component's rendered content here -->
<slot></slot>
</div>
</div>
I'm using vue-slick component but I have some problem with the v-for loop.
This is my code:
<slick
ref="slick"
:options="slickOptions"
class="float-left full-width slider-ingredients">
<div
v-for="ingredient in available_prots_source"
:key="ingredient.id"
#click="onSelectIngredient(ingredient.id, 'prots')"
class="slider-ingredient-item">
<div class="float-left ingredient-image">
<div class="content">
<img :src="ingredient.image" width="200" height="200" class="float-left cover-fit">
</div>
</div>
<h4 class="float-left full-width text-center ingredient-name">
{{ingredient.name}}
</h4>
<span class="float-left full-width text-center ingredient-details">
dettagli
</span>
</div>
</slick>
The problem is that my div is added outside the slick container. If I add a <div> just after the <slick> opening tag it render correctly but sees just one element even if my v-for add 4 or 5 elements.
What am I doing wrong?
How can I use slick with v-for loops?
from the official README (see method reInit in the README.md
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
Have code like this in vue.js ,my agenda is to make the modal movable from one end to other end, here is my code,have used bootstrap modal for this purpose and have included : draggable
<b-modal ref="my-modal" hide-footer title="Edit Record">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="">Viz Attributes</div>
</div>
<div class="card-body">
</div>
</div>
</b-modal>
you can't position them absolutely in the viewport.
You would need to change the positioning of the modal dialog sub-container to absolute and control the left/top position based on dragging. This is not an overly easy task. You would need to create your own modal to draggable.
I suggest to you use Vue.js modal component DEMO: www.vue-js-modal.yev.io
install: www.npmjs.com/package/vue-js-modal
<modal name="bar" draggable=".window-header">
<div class="window-header">DRAG ME HERE</div>
<div>
Hello!
</div>
</modal>
Draggable property can accept not only Boolean but also String parameters.
I have a component which returns locations, then places, then hotels one after her other but I want these in 3 different parts like they show in tabs.
component code:
<template>
<li class="col-xs-12" :id="location.id">
<p class="col-xs-3">{{location.name}} - Days : </p>
<div class="col-xs-2"><input type="text" v-model="location.days"></div>
<div class="col-xs-4">
<!-- {{hotelset(location.id,hotels)}}-->
<!-- {{typeof (hotels)}}{{index}}-->
<v-select v-model="hotelselect[location.id]" name="addhotel" label="title"
#input="addtohotel(index,location.id)" :value="non" :options=hoteloptions[location.id] />
<!--{{hoteloptions}}-->
<!--{{$props}}-->
</div>
<button #click="remove" class="col-xs-3 btn btn-danger">Remove</button>
<div></div>
<div class="col-xs-12" v-for="day in parseInt(location.days)" :key="day">
Day {{day}}-
{{preselect(day,defaultt,location.id,place)}}
<v-select v-model="days[day]" name="addplaceloc" label="title" #input="addtoplaces(day,location.id)"
:value="defaultt" :options="localplace[location.id][day]" multiple />
<!--{{localplace[location.id][day]}}-->
<div v-for="(placeinfo, index) in objj[location.id]['day-'+day]['place']">Place: {{placeinfo['title']}}:
<label>From:</label><input type="text"
v-model="objj[location.id]['day-'+day]['place'][index]['from_time']">
<label>To:</label><input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['to_time']">
<label>Remark:</label><input type="text"
v-model="objj[location.id]['day-'+day]['place'][index]['remark']">
<button #click="run"> yess</button>
</div>
</div>
</li>
<!--#click="remove"-->
in above code there are 2 v-select and 1 input listed one after the other as they are dependent to each other but I want it in different tabs in parent vue file. How to achieve it? tabs have its own style and html structure.
As #muka.gergely said, the only way to re-use HTML is to break it off into separate components.
Each user type in my app needs to have a different dashboard, so, at the moment, my admin vue looks like the following:
<template>
<main id="admin-main">
<header id="admin-dashboard-header" class="jumbotron">
<div>
<h1>Job Dashboard</h1>
<p>Worker > Dashboard</p>
</div>
</header>
<div class="row container">
<div class="col-4">
<ul class="list-group text-center">
<li class="list-group-item active">Dashboard</li>
<li class="list-group-item">Companies</li>
<li class="list-group-item">Jobs</li>
<li class="list-group-item">Candidates</li>
</ul>
</div>
<div class="col-8">
All components must load here
</div>
</div>
</main>
</template>
<style scoped>
h1{
font-size: 50px;
}
</style>
Ideally, each list item(Companies, Jobs, Candidates) must load their respective component.
So, for instance, how can I load jobs component in this same page when I click on the jobs list item?
One solution would be to use dynamic components. See: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
You can see an example I made here: https://codepen.io/bergur/pen/bPEJdB
In my Vue app I've made a data property called selectedComponent, and defined a method that sets that property according to the parameter
setComponent(name) {
this.selectedComponent = name
}
You then invoke that function with something like:
<button #click="setComponent('menuList')">Menu List</button>
And here is the real magic
<component :is="selectedComponent" />
So when I press the button. The data property selectedComponent gets the value menuList which is the registered component.
The component tag then renders that component.