Всем привет, недавно начал изучать vue и столкнулся с такой проблемой, что редактор подчеркивает, когда я ставлю одинарные кавычки в классе
:class="{'is-active':tab.selected}"
Возможно, этот метод уже не правильный или как можно по другому эту строчку перезаписать. Делаю по уроку и на видео работает, но у меня подчеркивает, пишу на webstorme, кто может объяснить в чем проблема?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css">
<style type="text/css">body {padding-top:40px;}</style>
</head>
<body>
<div id="root" class="container">
<tabs>
<tab name="About Us" v-bind:selected="true">
<h1>HELLO</h1>
</tab>
<tab name="About Our coulter">
<h1>AGE</h1>
</tab>
<tab name="About Usdsfsdf">
<h1>EVAR</h1>
</tab>
</tabs>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/VueTest.js"></script>
</body>
</html>
VueTest.js:
Vue.component('tabs',{
template:'<div>' +
'<div class="tabs">\n' +
' <ul>\n' +
'<li v-for="tab in tabs" :class="{'is-active':tab.selected}">' +
'<a href="#">{{tab.name}}</a>' +
'</li>'+
' </ul>\n' +
'</div>' +
'<div class="tabs-details"><slot></slot></div>' +
'</div>',
data:function () {
return{
tabs:[]
} ;
},
created:function () {
this.tabs=this.$children;
}
});
Vue.component('tab',{
template:'<div><slot></slot></div>',
props:{
name:{required:true},
selected:{default:false}
}
});
var app = new Vue({
el:'#root'
});
.vue
или.html
?