I am trying to create a Bootstrap tabs component in Vuejs. The tabs component consists of two parts. First, the parent tabs-list component which contains multiple tab-list-item component. Here is the code for both of these-
//Vue component template for tabs list.
Vue.component('tabs-list', {
template: `<ul class="nav nav-tabs nav-justified" role="tablist">
<tab-list-item v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item>
</ul>`,
data() {
return {
activeTab: 1,
concepts: [ { title: 'Tab A', id:1, active: true},
{ title: 'Tab B', id:2, active: false},
{ title: 'Tab C', id:3, active: false},
{ title: 'Tab D', id:4, active: false},
{ title: 'Tab E', id:5, active: false},
{ title: 'Tab F', id:6, active: false},
{ title: 'Tab G', id:7, active: false},
{ title: 'Tab H', id:8, active: false}]
}
},
methods: {
tabItemClicked(concept) {
console.log(concept);
this.activeTab = concept.id;
this.concepts.forEach(tab=> {
tab.active = (tab.id === concept.id);
});
}
}
});
//Vue component template for tab list item.
Vue.component('tab-list-item', {
props: ['concept', 'selected'],
template: `<li role="presentation" :class="{active:concept.active}">
<a :href='computedHref' :aria-controls="ariaControls" role="tab" data-toggle="tab" #click="tabClicked">
<img :src="aquaImage" class="image-responsive concept-image img-active">
<slot></slot>
</a>
</li>`,
computed: {
computedHref: function() {
return "#concept"+this.concept.title
},
ariaControls: function() {
return "concept"+this.concept.title
},
aquaImage: function() {
return "/images/"+this.concept.title+"-aqua.png"
}
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.selected;
},
methods: {
tabClicked: function() {
this.$emit('tabItemClicked', [this.concept]);
}
}
});
So, here my tab-list-item should emit an event tabItemClicked when any of the tabs is clicked. However, I am not getting anything logged in the console. When I take a look at the Vue developer console, I do see the event getting emitted. But why is it not getting captured by the parent tabs-list method? Any help will be greatly appreciated!
You have to explicitly listen to the event in the parent component template
Vue.component('tabs-list', {
template: `<ul class="nav nav-tabs nav-justified" role="tablist">
<tab-list-item v-on:tabItemClicked="tabItemClicked" v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item>
</ul>`,
//....,
methods: {
tabItemClicked(concept) {
console.log(concept);
this.activeTab = concept.id;
this.concepts.forEach(tab=> {
tab.active = (tab.id === concept.id);
});
}
}
}
camelCased custom events do not invoke trigger in parent. Change this.$emit('tabItemClicked', [this.concept]); tothis.$emit('tab_item_clicked', [this.concept]); See https://github.com/vuejs/vue/issues/4044
Related
I have this code in VueJs , simple task list, completed and incompleted ones, when I check or uncheck the box the task should move to the proper list.
var app = new Vue({
el: '#vueapp',
data: {
tasks: [{
id: 1,
description: 'Do some Stuff',
completed: false
},
{
id: 2,
description: 'Go to pharmacy',
completed: false
},
{
id: 3,
description: 'Go to doctor',
completed: true
},
{
id: 4,
description: 'Do some Slask',
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
<h2>Completed Tasks</h2>
<ul>
<li v-for="(task, key) in completedTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
<h2>Incomplete Tasks</h2>
<ul>
<li v-for="(task, key) in incompleteTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
</div>
tested in Chrome. Try check the first incomplete task , it moves on the upper list succesfully, but the next incomplete task gets checked too.!!!!
You need to add a key to your loops :key="task.id".
To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item.
var app = new Vue({
el: '#vueapp',
data: {
tasks: [{
id: 1,
description: 'Do some Stuff',
completed: false
},
{
id: 2,
description: 'Go to pharmacy',
completed: false
},
{
id: 3,
description: 'Go to doctor',
completed: true
},
{
id: 4,
description: 'Do some Slask',
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
.as-console-wrapper { display: none !important; }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
<h2>Completed Tasks</h2>
<ul>
<li v-for="(task, key) in completedTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
<h2>Incomplete Tasks</h2>
<ul>
<li v-for="(task, key) in incompleteTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
</div>
I have this fiddle:
https://jsfiddle.net/pnqzspoe/12014/
I want to modify it a bit and want to display each node as a text area containing the corresponding text. Further, I want to give an option to 'reply' to it. This would mean insertion of a new text area into which we can enter text.
Here is the code:
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
#click="toggle"
#dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
<li class="add" #click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
// boot up the demo
var demo = new Vue({
el: '#demo',
data: {
treeData: data
}
})
What would be the template for this use-case?
If I don't understand your question wrongly...
Replace
{{model.name}}
with
<textarea v-model="model.name"></textarea>
should work?
I'm trying to keep a component alive when moving the bound item object to a different data array. Because it gets moved, the default keep-alive tag doesn't work.
I need this to improve loading time when dynamic components in my app use external libraries.
Simplified example: (https://jsfiddle.net/eywraw8t/24419/)
HTML:
<div id="app">
<div v-for="list in lists">
<h1>{{ list.title }}</h1>
<ul>
<draggable v-model="list.items" :options="{group: 'list-items'}">
<list-item
v-for="item in list.items"
:key="item.key"
:content="item.content">
</list-item>
</draggable>
</ul>
</div>
</div>
JS:
Vue.component('list-item', {
props: {
content: {
required: true
}
},
mounted () {
document.body.insertAdjacentHTML('beforeend', 'Mounted! ');
},
template: '<li>{{ content }}</li>'
})
new Vue({
el: "#app",
data: {
lists: [
{
title: 'List 1',
items: [
{ key: 'item1', content: 'Item 1' },
{ key: 'item2', content: 'Item 2' },
{ key: 'item3', content: 'Item 3' }
]
},
{
title: 'List 2',
items: [
{ key: 'item4', content: 'Item 4' },
{ key: 'item5', content: 'Item 5' },
{ key: 'item6', content: 'Item 6' }
]
}
]
}
})
If the problem is just one of caching expensive html build, you can do it by removing the list-item component from the template and building them ahead of time in app.mounted().
How well this works in your real-world scenario depends on the nature of item.content and it's lifecycle.
console.clear()
const ListItem = Vue.component('list-item', {
props: {
content: {
required: true
}
},
mounted () {
document.body.insertAdjacentHTML('beforeend', 'Mounted! ');
},
template: '<li>{{ content }}</li>'
})
new Vue({
el: "#app",
methods: {
getHtml(content) {
const li = new ListItem({propsData: {content}});
li.$mount()
return li.$el.outerHTML
}
},
mounted () {
this.lists.forEach(list => {
list.items.forEach(item => {
const cacheHtml = this.getHtml(item.content)
Vue.set( item, 'cacheHtml', cacheHtml )
})
})
},
data: {
lists: [
{
title: 'List 1',
items: [
{ key: 'item1', content: 'Item 1' },
{ key: 'item2', content: 'Item 2' },
{ key: 'item3', content: 'Item 3' }
]
},
{
title: 'List 2',
items: [
{ key: 'item4', content: 'Item 4' },
{ key: 'item5', content: 'Item 5' },
{ key: 'item6', content: 'Item 6' }
]
}
]
}
})
ul {
margin-bottom: 20px;
}
li:hover {
color: blue;
cursor: move;
}
h1 {
font-size: 20px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<div id="app">
<div v-for="list in lists">
<h1>{{ list.title }}</h1>
<ul>
<draggable v-model="list.items" :options="{group: 'list-items'}">
<div v-for="item in list.items" :key="item.key">
<li v-html="item.cacheHtml"></li>
</div>
</draggable>
</ul>
</div>
</div>
Reactive item.content
To keep reactivity when item.content changes, you will need a little more code.
add a copy of the item.content to the cache
add a method to fetch the cached html with refresh if content has changed.
(You may be able to do this a little more elegantly with a parameterized computed property).
To simulate an item.content change, I've added a setTimeout to mounted().
console.clear()
const ListItem = Vue.component('list-item', {
props: {
content: {
required: true
}
},
mounted () {
document.body.insertAdjacentHTML('beforeend', 'Mounted! ');
},
template: '<li>{{ content }}</li>'
})
new Vue({
el: "#app",
methods: {
getHtml(content) {
const li = new ListItem({
propsData: { content }
});
li.$mount()
return li.$el.outerHTML
},
cacheHtml(item) {
if (item.cache && item.cache.content === item.content) {
return item.cache.html
} else {
const html = this.getHtml(item.content)
const cache = {content: item.content, html}
Vue.set(item, 'cache', cache)
}
}
},
mounted () {
this.lists.forEach(list => {
list.items.forEach(item => {
this.cacheHtml(item)
})
})
setTimeout(() =>
Vue.set( this.lists[0].items[0], 'content', 'changed' )
,2000)
},
data: {
lists: [
{
title: 'List 1',
items: [
{ key: 'item1', content: 'Item 1' },
{ key: 'item2', content: 'Item 2' },
{ key: 'item3', content: 'Item 3' }
]
},
{
title: 'List 2',
items: [
{ key: 'item4', content: 'Item 4' },
{ key: 'item5', content: 'Item 5' },
{ key: 'item6', content: 'Item 6' }
]
}
]
}
})
ul {
margin-bottom: 20px;
}
li:hover {
color: blue;
cursor: move;
}
h1 {
font-size: 20px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<div id="app">
<div v-for="list in lists">
<h1>{{ list.title }}</h1>
<ul>
<draggable v-model="list.items" :options="{group: 'list-items'}">
<div v-for="item in list.items" :key="item.key">
<li v-html="cacheHtml(item)"></li>
</div>
</draggable>
</ul>
</div>
</div>
i looked into your problem and i think i might found a solution, i cannot do it in js fiddle but i'll try and explain it:
in your js fiddle the mounted is hooked in your list-item component, so indeed every time that state changed (when dragging), the event is triggered.
i create a setup with a main templated component (componentX), with a mounted function, and then created a seperated list-item component
in my sample you will see the mounted twice at the start, that is normal since we have 2 lists! but then when you start to drag and drop you will not get additional mounted events
you can download the solution in a zip from:
http://www.bc3.eu/download/test-vue.zip
it is a vue cli project, so you can just npm run dev to start a local server
Hello I have this code in my symfony 3 project :
TWIG TEMPLATE:
<div id="fileManagerContainer" class="AppContent">
{% verbatim %}
<!-- item template -->
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
#click="toggle"
#dblclick="changeType">
{{model.name}}
<span v-if="isFolder">{{open ? '-' : '+'}}</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="model in model.children"
:model="model">
</item>
<li class="add" #click="addChild">+</li>
</ul>
</li>
</script>
{% endverbatim %}
<p>(You can double click on an item to turn it into a folder.)</p>
<!-- the demo root element -->
<ul id="demo">
<item
class="item"
:model="treeData">
</item>
</ul>
</div>
VUE FILE :
// demo data
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
// boot up the demo
var demo = new Vue({
delimiters: ['{{', '}}'],
el: '#demo',
data: {
treeData: data
}
})
ant it works on jsfiddle, but doesnt do a thing in real project. All scripts are loaded perfectly, Vue.js works but just this piece of code does not. Any ideas ?
I am using contextmunu right click script . This is working for elements which are static loaded on pages. But for dynamic content like after click on 'Add category' 'contextmenu' function is not working.
$(document).ready( function() {
$("#add_category").click(function(){
$("#category_list").prepend('<h4 style="color: #53B332;" class="new_category" >New Category</h4>');
return false;
});
var option = { width: 150, items: [
{ text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-dsds1", action: menuAction },
{ text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },
{ text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
{ type: "splitLine" },
], onShow: applyrule,
onContextMenu: BeforeContextMenu
};
function menuAction() {
alert(this.data.alias);
}
function applyrule(menu) {
if (this.id == "target2") {
menu.applyrule({ name: "target2",
disable: true,
items: ["1-2", "2-3", "2-4", "1-6"]
});
}
else {
menu.applyrule({ name: "all",
disable: true,
items: []
});
}
}
function BeforeContextMenu() {
return this.id != "target3";
}
$(".new_category").contextmenu(option);
});
</script>
Add category
<div id="category_list" class="panel-body">
<h4 style="color: #53B332;" id="target" class="new_category">New Category</h4>
</div>