Vue-Laravel single file

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Jul 30, 2018 10:01 am

Имам един въпрос относно един туториал който пробвам. Става въпрос за табове и всичко си работи както трябва без грешки. Последното нещо което се прави в този туториал е като се натисне някой от табовете името му да се отразява и в адресбара на браузъра. Проблемът е че при рефреш селекта се връща на първият таб, но името в адресбара остава на този който е натиснат последно. Въпросът ми е как може да се оправи това?

[js]
<template>
<div class="container">
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{'is-active': tab.isActive}">
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<tab name="About" :selected="true">
<p>Content for About section.</p>
</tab>
<tab name="Culture">
<p>Content For Culture section.</p>
</tab>
<tab name="Vision">
<p>Content for Vision section.</p>
</tab>
</div>
</template>

<script>
export default {
data: function () {
return {
tabs: []
}
},
created: function () {
this.tabs = this.$children;
},
methods: {
selectTab: function (selectedTab) {
this.tabs.forEach(function (tab) {
tab.isActive = (tab.name == selectedTab.name);
});
}
}
}

Vue.component('tab', {
template: '<div v-show="isActive"><slot></slot></div>',
props: {
name: {required: true},
selected: {default: false}
},
data: function () {
return {
isActive: false
}
},
mounted: function () {
this.isActive = this.selected
},
computed: {
href: function () {
//От този ред слагаме името на натиснатия таб в адресбара
return '#' + this.name.toLowerCase().replace(/ /g, '-');
}
}
});
</script>
[/js]

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1574
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Tue Jul 31, 2018 8:54 am

Доколкото виждам, ей тук задаваш по дефолт всички да са unselected:

selected: {default: false}

Т.е. ще замениш false с проверка за this.name в location.hash.

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Tue Jul 31, 2018 9:32 am

anonimen wrote:Доколкото виждам, ей тук задаваш по дефолт всички да са unselected:

selected: {default: false}

Т.е. ще замениш false с проверка за this.name в location.hash.
Не можах да те разбера къде да направя проверката и как?

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1574
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Tue Jul 31, 2018 10:52 am

teroristd wrote:
anonimen wrote:Доколкото виждам, ей тук задаваш по дефолт всички да са unselected:

selected: {default: false}

Т.е. ще замениш false с проверка за this.name в location.hash.
Не можах да те разбера къде да направя проверката и как?
На този ред

selected: {default: false}

задаваш по подразбиране всеки таб да *не* е избран.

Ти искаш по подразбиране да бъде избран този таб, който отговаря на location.hash-а (това след # в URLто)

Затова, вместо да казваш false за всички, ти трябва обратната на тази функция, която използваш за генериране на location.hash-а:

return '#' + this.name.toLowerCase().replace(/ /g, '-');

Т.е. вместо false, ще провериш дали "this.name.toLowerCase().replace(/ /g, '-');" отговаря на location.hash-a:

[js]selected: {
default: this.name.toLowerCase().replace(/ /g, '-') === location.hash
}[/js]

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1574
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Tue Jul 31, 2018 10:57 am

Всъщност, както гледам, май няма да стане толкова просто, защото в {} аргумента на Vue.component(), който подаваш, this.name няма да работи така.

Не съм работил с Vue, само предположих, че така ще тръгне, ама явно не :(

И по-добре отвори нова тема за новия въпрос :idea:

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Tue Jul 31, 2018 11:10 am

Така ми вади грешка.
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined...
А ако махна this от name няма грешка но нищо не се случва.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1574
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Thu Aug 02, 2018 9:04 am

teroristd wrote:Така ми вади грешка.
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined...
А ако махна this от name няма грешка но нищо не се случва.
Може би си пропуснал предното ми мнение - не съм запознат с/използвал никога Vue.

this.name използвах, за да взема името на текущия таб, но понеже това е в property-то на обект {}, се използва this референцията от външния scope, а не този на обекта.

Но, явно Vue.component се използва за статична дефиниция на компонент, а задаването на property (в случая "default") с функция (а не от compile-time константа като false) не се прави така. Предполагам, че трябва да го пъхнеш в computed, и Vue да ти го извика - не знам.

Ще погледна какво пише в docs, а междувременно опитай да откриеш къде се задава defaultовия select.

Виждам, че в html темплейта си задал :selected="true"

Предполагам вместо true, ще трябва да сложиш някаква променлива, която пък ще дойде от дефиницията на компонента и ще зададеш в computed property-то.

Post Reply