I'm learning VueJS and I want to make tab components. I have a main.js and index.html file as follows:
Vue.component('tabs', {
template: "<div><div class='tabs is-medium'><ul><li v-for='tabb in tabs' :class='{'is-active': tabb.selected}'><a href='#'>{{ tabb.name }}</a></li></ul></div><div class='tabs-details'> <slot></slot></div></div>",
data() {
return {tabs: []};
},
created() {
this.tabs = this.$children;
}
});
Vue.component('tab', {
template: '<div><slot></slot></div>',
props: {
name: {required: true },
selected: { default: false }
}
})
new Vue({
el: '#root'
});<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
</head>
<body>
<div id="root">
<tabs>
<tab name="Tab1" :selected="true">
<h1>Tab1 content</h1>
</tab>
<tab name="Tab2">
<h1>Tab2 content</h1>
</tab>
<tab name="Tab3">
<h1>Tab3 content</h1>
</tab>
</tabs>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</body>
</html>The problem is in class binding part (:class='{'is-active': tabb.selected}'). The code works when it's removed or when the binding is not used and class value remains the same (class='is-active'). I was wondering why the binding class is not working ?
Note: Single quotes are used everywhere in template because it's (apparently) the only way I can keep everything in template (thus between " ") in the editor Atom.
You cannot write this:
:class='{'is-active': tabb.selected}'
You're using single quotes for two different purposes. As soon as Vue encounters that second ' it is going to think that the attribute value has ended. This ends up being equivalent to:
:class='{'
The usual convention is to use backticks (not to be confused with single-quotes) for templates, like this:
template: `
<div>
<div class="tabs is-medium">
<ul>
<li v-for="tabb in tabs" :class="{'is-active': tabb.selected}">
<a href="#">{{ tabb.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
If you really can't use backticks then just escape some double-quotes. So either one of these:
:class=\"{'is-active': tabb.selected}\"
or:
:class='{\"is-active\": tabb.selected}'
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments