Use vue shorthands

2018-10-03 16:00:08 +02:00
parent 721f6ff705
commit 5c9363357a
44 changed files with 148 additions and 114 deletions
@@ -1,6 +1,6 @@
 <template>
    <div>
-        <input class="date-input" type="text" v-model="date" v-bind:placeholder="placeholder" ref="field" />
+        <input class="date-input" type="text" v-model="date" :placeholder="placeholder" ref="field" />
    </div>
 </template>
 <script>
@@ -1,12 +1,12 @@
 <template>
    <div class="step-input">
        <a href="#" class="step-input__trigger step-input__trigger--decrease"
-           v-bind:class="{ disabled: decreaseButtonDisabled }"
-           v-on:click.prevent="decreaseValue"></a>
+           :class="{ disabled: decreaseButtonDisabled }"
+           @click.prevent="decreaseValue"></a>
        <div class="step-input__value">{{ displayedValue }}</div>
        <a href="#" class="step-input__trigger step-input__trigger--increase"
-           v-bind:class="{ disabled: increaseButtonDisabled }"
-           v-on:click.prevent="increaseValue"></a>
+           :class="{ disabled: increaseButtonDisabled }"
+           @click.prevent="increaseValue"></a>
    </div>
 </template>
 <script>
@@ -22,7 +22,7 @@
                            </f:if>
                            <div class="content__float">
                                <f:if condition="{traveltype.buttonlabel}">
-                                    <a class="badge" href="#examples" v-on:click.prevent="scrollTo('#examples')">
+                                    <a class="badge" href="#examples" @click.prevent="scrollTo('#examples')">
                                        <div class="badge__content">{traveltype.buttonlabel -> f:format.nl2br()}</div>
                                        <svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
                                            <g>
@@ -32,7 +32,7 @@
                    <polygon points="12,0 12,48 0,48" />
                </svg>
                <a class="button button--herounit" href="#configurator"
-                   v-on:click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
+                   @click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
                <svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
                    <polygon points="0,0 12,0 0,48" />
                </svg>
@@ -18,7 +18,7 @@
            <svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
                <polygon points="12,0 12,48 0,48"></polygon>
            </svg>
-            <a class="button button--herounit" href="#configurator" v-on:click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
+            <a class="button button--herounit" href="#configurator" @click.prevent="scrollTo('#configurator')">&raquo; Jetzt anfragen</a>
            <svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
                <polygon points="0,0 12,0 0,48"></polygon>
            </svg>
@@ -15,7 +15,7 @@
                    <svg viewBox="0 0 16 16"><g><path d="M3.468,11.206l0,0.173c0,1.15 -0.001,2.302 0,3.452c0,0.438 0.2,0.637 0.642,0.637c2.593,0 5.186,0 7.78,0c0.442,0 0.642,-0.199 0.642,-0.637l0,-3.452l0,-0.173l-9.064,0Zm9.064,-6.412l0,-0.173l0,-3.453c0,-0.437 -0.2,-0.636 -0.642,-0.636c-2.594,0 -5.187,0 -7.781,0c-0.441,0 -0.641,0.198 -0.641,0.636c-0.001,1.152 0,2.303 0,3.454l0,0.172l9.064,0Zm0.532,7.47c0.377,0 0.731,0.017 1.083,-0.004c0.65,-0.039 1.048,-0.468 1.05,-1.12c0.004,-1.562 0.004,-3.124 -0.001,-4.686c-0.002,-0.673 -0.446,-1.117 -1.118,-1.117c-4.051,-0.003 -8.101,-0.003 -12.152,0.003c-0.176,0.001 -0.368,0.038 -0.526,0.113c-0.429,0.206 -0.601,0.576 -0.6,1.044c0.004,1.4 0.002,2.801 0.002,4.201c0,0.193 -0.003,0.386 0.009,0.578c0.028,0.443 0.315,0.852 0.749,0.928c0.444,0.079 0.906,0.061 1.379,0.087l0,-1.616l10.125,0l0,1.589Zm-0.908,-12.264c0.34,0.09 0.638,0.249 0.781,0.585c0.075,0.177 0.121,0.379 0.122,0.571c0.011,1.146 0.005,2.291 0.005,3.436l0,0.21c0.082,0 0.153,-0.002 0.224,0c0.4,0.012 0.807,-0.017 1.199,0.047c0.698,0.115 1.199,0.724 1.236,1.434c0.013,0.233 0.009,0.468 0.009,0.702c0.001,1.375 -0.003,2.749 0.002,4.124c0.002,0.562 -0.184,1.028 -0.636,1.373c-0.301,0.232 -0.648,0.321 -1.023,0.32c-0.276,-0.001 -0.552,0 -0.828,0l-0.183,0l0,0.187c0,0.62 0.001,1.239 0,1.859c-0.001,0.706 -0.446,1.151 -1.151,1.152c-2.609,0 -5.217,0 -7.825,0c-0.706,-0.001 -1.151,-0.446 -1.153,-1.152c-0.001,-0.62 0,-1.239 0,-1.859l0,-0.187c-0.316,0 -0.616,0.005 -0.916,-0.002c-0.176,-0.005 -0.356,-0.011 -0.527,-0.048c-0.689,-0.15 -1.181,-0.735 -1.215,-1.441c-0.015,-0.28 -0.009,-0.561 -0.009,-0.842c-0.001,-1.328 0.003,-2.656 -0.002,-3.984c-0.002,-0.555 0.182,-1.018 0.628,-1.361c0.246,-0.188 0.524,-0.303 0.834,-0.313c0.338,-0.012 0.677,-0.007 1.015,-0.009c0.056,-0.001 0.113,0 0.192,0l0,-0.194c0,-1.104 0.016,-2.208 -0.006,-3.311c-0.012,-0.588 0.184,-1.104 0.914,-1.297l8.313,0Z"/><path d="M13.063,7.466c0.001,0.296 -0.242,0.537 -0.536,0.533c-0.289,-0.004 -0.525,-0.244 -0.526,-0.532c-0.001,-0.295 0.243,-0.534 0.539,-0.531c0.29,0.004 0.523,0.239 0.523,0.53"/><rect x="4.008" y="12.276" width="7.984" height="0.514"/><rect x="4.008" y="13.877" width="7.985" height="0.514"/></g></svg>
                </div>
                <div class="iconbar__bar">
-                    <a class="iconbar__link" href="#" v-on:click.prevent="triggerPrintDialog()">Seite drucken</a>
+                    <a class="iconbar__link" href="#" @click.prevent="triggerPrintDialog()">Seite drucken</a>
                </div>
            </div>
        </f:comment>
@@ -45,7 +45,7 @@
        </div>
    </div>
 </footer>
-<a v-on:click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="scrolltop">
+<a @click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="scrolltop">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 44 24"><path d="M6.372 19.914L22.016 3.627 37.96 19.95" fill="none" stroke-width="6.67" stroke="#fff"/></svg>
 </a>
@@ -95,7 +95,7 @@
                </div>
            </div>
        </div>
-        <a class="navtoggle" href="#" v-on:click.prevent="toggleMobileNavigation()">
+        <a class="navtoggle" href="#" @click.prevent="toggleMobileNavigation()">
            <svg class="navtoggle__icon" preserveAspectRatio="xMinYMid" viewBox="0 0 28 28">
                <path d="M2,8L26,8C27.104,8 28,7.104 28,6C28,4.896 27.104,4 26,4L2,4C0.896,4 0,4.896 0,6C0,7.104 0.896,8 2,8ZM26,12L2,12C0.896,12 0,12.896 0,14C0,15.104 0.896,16 2,16L26,16C27.104,16 28,15.104 28,14C28,12.896 27.104,12 26,12ZM26,20L2,20C0.896,20 0,20.896 0,22C0,23.104 0.896,24 2,24L26,24C27.104,24 28,23.104 28,22C28,20.896 27.104,20 26,20Z"/>
            </svg>
@@ -11,7 +11,7 @@
                <div class="content__main">
                    <div class="content__background {ep:sectionCssClass(sectionValue: activity.configuratorType)}">
                        <f:if condition="{offers}">
-                            <a class="badge" href="#" v-on:click.prevent="scrollTo('#examples')">
+                            <a class="badge" href="#" @click.prevent="scrollTo('#examples')">
                                <div class="badge__content">Beispiel-<br>angebot{f:if(condition: '{offers -> f:count()} > 1', then: 'e')}</div>
                                <svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
                                    <g>
@@ -78,8 +78,8 @@
                                     v-for="(selectBoxData, selectBoxType) in selectBoxes"
                                     :class="{ active: selectBoxData.active }">
                                    <a href="#" class="config-selectbox__bar"
-                                       v-on:click.prevent="toggleSelectBox(selectBoxType)"
-                                       v-on:touchend.prevent="toggleSelectBox(selectBoxType)">
+                                       @click.prevent="toggleSelectBox(selectBoxType)"
+                                       @touchend.prevent="toggleSelectBox(selectBoxType)">
                                        <span class="config-selectbox__title">{{ selectBoxData.name }}:</span>
                                        <div class="config-selectbox__badges">
                                            <span v-for="badge in selectedOptions(selectBoxType)" class="config-selectbox__badge">{{ badge }}</span>
@@ -100,8 +100,8 @@
                                            'has--icon': selectBoxData.hasIcon
                                           }
                                           ]"
-                                           v-on:click.prevent="toggleSelection(selectBoxType, value)"
-                                           v-on:touchend.prevent="toggleSelection(selectBoxType, value)">
+                                           @click.prevent="toggleSelection(selectBoxType, value)"
+                                           @touchend.prevent="toggleSelection(selectBoxType, value)">
                                            <div class="config-selectbox__item__inner"
                                                 :style="{ backgroundImage: 'url(' + selectBoxData.images[value] + ')' }">
                                                <span class="config-selectbox__item-label">{{ label }}</span>
@@ -116,7 +116,7 @@
                                        <span class="configurator-field__label">Ziel:</span>
                                        <step-input class="configurator-field__input" name="distance"
                                                    :default-value="formData.distance"
-                                                    v-on:change="updateData"
+                                                    @change="updateData"
                                                    :options="optionsDistance"
                                        ></step-input>
                                    </div>
@@ -124,7 +124,7 @@
                                        <span class="configurator-field__label">Teilnehmerzahl:</span>
                                        <step-input class="configurator-field__input" name="pax"
                                                    :default-value="formData.pax"
-                                                    v-on:change="updateData"
+                                                    @change="updateData"
                                                    :options="optionsPax"
                                        ></step-input>
                                    </div>
@@ -132,7 +132,7 @@
                                        <span class="configurator-field__label">Budget pro Person ohne Anreise:</span>
                                        <step-input class="configurator-field__input" name="budget"
                                                    :default-value="formData.budget"
-                                                    v-on:change="updateData"
+                                                    @change="updateData"
                                                    :options="optionsBudget"
                                        ></step-input>
                                    </div>
@@ -141,13 +141,13 @@
                                        <div class="configurator-field__input configurator-field__group">
                                            <step-input name="period"
                                                        :default-value="formData.period"
-                                                        v-on:change="updateData"
+                                                        @change="updateData"
                                                        :options="optionsPeriod"
                                            ></step-input>
                                            <date-range-input name="dateRange"
                                                             :default-date-from="formData.dateFrom"
                                                             :default-date-to="formData.dateTo"
-                                                             v-on:selected="updateDateRange"></date-range-input>
+                                                             @selected="updateDateRange"></date-range-input>
                                        </div>
                                    </div>
                                    <div class="form__item form__item--tablet">
@@ -159,7 +159,7 @@
                                    </div>
                                    <div class="form__item form__item--button form__item--tablet">
                                        <button class="button button--configurator"
-                                                v-on:click.prevent="submitForm">&raquo; jetzt anfragen</button>
+                                                @click.prevent="submitForm">&raquo; jetzt anfragen</button>
                                    </div>
                                    <f:if condition="{settings.feedbackPageUid}">
                                        <div class="form__item form__item--link form__item--tablet">
@@ -209,7 +209,7 @@
                                    </div>
                                    <div class="form__item form__item--button form__item--mobile">
                                        <button class="button button--configurator"
-                                                v-on:click.prevent="submitForm">&raquo; jetzt anfragen</button>
+                                                @click.prevent="submitForm">&raquo; jetzt anfragen</button>
                                    </div>
                                </div>
                            </div>
@@ -261,7 +261,7 @@
                        <img src="{f:uri.resource(path: 'images/spinner_configurator.gif', extensionName: 'ep_events')}"
                             alt="Processing...">
                    </div>
-                    <div class="configurator__overlay" v-if="success" v-on:click.prevent="resetForm()">
+                    <div class="configurator__overlay" v-if="success" @click.prevent="resetForm()">
                        <p class="form__overlay__text"><strong>Vielen Dank für Ihre Anfrage. Wir werden uns
                            schnellstmöglich mit Ihnen in Verbindung setzen.<br>Klicken für eine weitere Anfrage.</strong></p>
                    </div>
@@ -58,7 +58,7 @@
                                <div class="form__item__error" v-show="formErrors.inquiryphone" v-html="formErrors.inquiryphone"></div>
                            </div>
                            <div class="form__item form__item--text">
-                                <a class="form__link" href="#" v-on:click.prevent="toggleDetails()">
+                                <a class="form__link" href="#" @click.prevent="toggleDetails()">
                                    <span v-show="!detailsVisible">Weitere</span>
                                    <span v-show="detailsVisible">Weniger</span> Angaben</a>
                            </div>
@@ -67,7 +67,7 @@
                                     v-show="formErrors.inquiryphone" v-html="formErrors.inquiryphone"></div>
                            </div>
                            <div class="form__item form__item--text">
-                                <a class="form__link form__link--indent" href="#" v-on:click.prevent="toggleDetails()">
+                                <a class="form__link form__link--indent" href="#" @click.prevent="toggleDetails()">
                                    <span v-show="!detailsVisible">Weitere</span>
                                    <span v-show="detailsVisible">Weniger</span> Angaben</a>
                            </div>
@@ -25,7 +25,7 @@
            </div>
        </div>
        <div class="content__background {ep:sectionCssClass(sectionValue: offer.configuratorType)}">
-            <a class="badge" href="#" v-on:click.prevent="scrollTo('#examples')">
+            <a class="badge" href="#" @click.prevent="scrollTo('#examples')">
                <div class="badge__content">Weitere-<br>Beispiele</div>
                <svg class="badge__background" width="100%" height="100%" viewBox="0 0 160 160">
                    <g>
@@ -56,13 +56,13 @@
                <f:then>
                    <img class="teaser__image"
                         src="{f:uri.image(image: image, cropVariant: 'default', width: '500')}"
-                         alt="{title} {subtitle}"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
+                         alt="{title} {subtitle}"{f:if(condition: link, then: ' @click.prevent="scrollTo(\'{link}\')"')}>
                </f:then>
                <f:else>
                    <img class="teaser__image" src="https://placehold.it/500x500" alt="">
                </f:else>
            </f:if>
-            <div class="teaser__caption"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
+            <div class="teaser__caption"{f:if(condition: link, then: ' @click.prevent="scrollTo(\'{link}\')"')}>
                <span class="teaser__title">{title}</span>
                <span class="teaser__title teaser__title--subline">{subtitle}</span>
            </div>
@@ -2,7 +2,7 @@
    <div class="boardtypeselect">
        <div class="checkbox" v-for="boardType of boardTypesOptions">
            <label>
-                <input type="checkbox" v-model.number="boardTypesSelected" v-bind:value="boardType.uid">
+                <input type="checkbox" v-model.number="boardTypesSelected" :value="boardType.uid">
                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                {{ boardType.label }}
            </label>
@@ -4,18 +4,18 @@
            <h2>Belegungskalender {{ hotelName }}</h2>
        </div>
        <div class="calendar__loading" v-show="loading">
-            <img v-bind:src="loaderUri" alt="Loading" title="Loading">
+            <img :src="loaderUri" alt="Loading" title="Loading">
        </div>
        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
        <div class="calendar__buttons" v-cloak>
            <div class="col-xs-6">
-                <a v-show="showPrev" v-on:click.prevent="prev()" href="#"
+                <a v-show="showPrev" @click.prevent="prev()" href="#"
                   class="calendar__browse calendar__browse--prev btn btn-warning">
                    <i class="fa fa-chevron-left"></i> früher
                </a>
            </div>
            <div class="col-xs-6 text-right">
-                <a v-on:click.prevent="next()" href="#"
+                <a @click.prevent="next()" href="#"
                   class="calendar__browse calendar__browse--next btn btn-warning">
                    später <i class="fa fa-chevron-right"></i>
                </a>
@@ -1,9 +1,9 @@
 <template>
    <div v-if="showButtons" class="hidden-xs conceptbtns">
-        <a v-for="concept of concepts" v-on:click.prevent="scrollTo('#concept-' + concept.uid)"
-           v-bind:href="'#concept-' + concept.uid"
-           v-bind:class="'btn btn-warning ep-sidebar concept-' + concept.code"
-           v-bind:title="concept.name">{{ concept.name }}</a>
+        <a v-for="concept of concepts" @click.prevent="scrollTo('#concept-' + concept.uid)"
+           :href="'#concept-' + concept.uid"
+           :class="'btn btn-warning ep-sidebar concept-' + concept.code"
+           :title="concept.name">{{ concept.name }}</a>
    </div>
 </template>
 <script>
@@ -2,7 +2,7 @@
    <div class="conceptselect">
        <div class="checkbox" v-for="concept of conceptOptions">
            <label>
-                <input type="checkbox" v-model="conceptsSelected" v-bind:value="concept.uid">
+                <input type="checkbox" v-model="conceptsSelected" :value="concept.uid">
                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                nur {{ concept.name }}
            </label>
@@ -5,7 +5,7 @@
            <div v-if="!bookable" class="ep-headbar">Termine &amp; Leistungen</div>
        </template>
        <div class="dates-table__pricetoggle" v-if="hasSurcharge || hasDiscount">
-            <a href="#" v-if="hasSurcharge" v-on:click.prevent="toggleBus">
+            <a href="#" v-if="hasSurcharge" @click.prevent="toggleBus">
                <template v-if="addBus">
                    <i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen
                </template>
@@ -13,7 +13,7 @@
                    <i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen
                </template>
            </a>
-            <a href="#" v-if="hasDiscount" v-on:click.prevent="toggleDiscount">
+            <a href="#" v-if="hasDiscount" @click.prevent="toggleDiscount">
                <template v-if="discountBus">
                    <i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen
                </template>
@@ -34,14 +34,20 @@
                    </tr>
                </thead>
                <tbody>
-                    <tr v-for="(row, index) of datesRows" v-bind:class="{ 'hidden': index > 4 && !showAll }">
+                    <tr v-for="(row, index) of datesRows" :class="{ 'hidden': index > 4 && !showAll }">
                        <td class="dates-table__cell dates-table__cell--date">
                            <template v-if="bookable && row.available">
                                <a class="dates-table__date" href="#"
-                                   v-on:click.prevent="loadPriceTable(row.dateUid)">{{ row.dateStart }} - {{ row.dateEnd }}</a>
+                                   @click.prevent="loadPriceTable(row.dateUid)">
+                                    {{ row.dateStart }} - {{ row.dateEnd }}
+                                </a>
                                <div class="hidden-md hidden-lg dates-table__links">
-                                    <a href="#" v-on:click.prevent="loadPriceTable(row.dateUid)" class="button button--small">Details</a>
-                                    <a v-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">Buchen</a>
+                                    <a href="#" @click.prevent="loadPriceTable(row.dateUid)" class="button button--small">
+                                        Details
+                                    </a>
+                                    <a :href="row.bookingUrl" target="_blank" class="button button--small button--action">
+                                        Buchen
+                                    </a>
                                </div>
                            </template>
                            <template v-else>{{ row.dateStart }} - {{ row.dateEnd }}</template>
@@ -56,14 +62,14 @@
                                   class="fa fa-tag tooltiptoggle"></i>
                            </span>
                            <button type="button" class="button button--light  button--small hidden-xs tooltiptoggle"
-                                    data-toggle="modal" data-placement="top" v-bind:data-target="'#dateservices' + index"
+                                    data-toggle="modal" data-placement="top" :data-target="'#dateservices' + index"
                                    title="Alle Inklusivleistungen anzeigen">Leistungen</button>
-                            <a href="#" data-toggle="modal" v-bind:data-target="'#dateservices' + index"
+                            <a href="#" data-toggle="modal" :data-target="'#dateservices' + index"
                               class="hidden-sm hidden-md hidden-lg"><i class="fa fa-info-circle"></i></a>
                        </td>
                        <td class="dates-table__cell dates-table__cell--buttons hidden-xs">
-                            <button v-if="bookable" class="button button--small" v-on:click="loadPriceTable(row.dateUid)">Details</button>
-                            <a v-bind:href="row.bookingUrl" target="_blank" v-if="bookable" class="button button--small button--action">Buchen</a>
+                            <button v-if="bookable" class="button button--small" @click="loadPriceTable(row.dateUid)">Details</button>
+                            <a :href="row.bookingUrl" target="_blank" v-if="bookable" class="button button--small button--action">Buchen</a>
                        </td>
                    </tr>
                </tbody>
@@ -71,19 +77,19 @@
        </div>
        <div class="row dates-table__links" v-if="datesRows.length > 5 || altProductLink">
            <div class="col-xs-12 col-md-6">
-                <a href="#" v-if="datesRows.length > 5" v-on:click.prevent="toggleAllDates()">
+                <a href="#" v-if="datesRows.length > 5" @click.prevent="toggleAllDates()">
                    <i class="fa" :class="[{ 'fa-minus-circle': showAll }, { 'fa-plus-circle': !showAll }]"></i>
                    Alle Termine <template v-if="showAll">aus</template><template v-else>ein</template>blenden
                </a>
            </div>
            <div class="col-xs-12 col-md-6">
-                <a v-bind:href="altProductLink" v-if="altProductLink" v-bind:title="altLabel" class="dates-table__altlink">
+                <a :href="altProductLink" v-if="altProductLink" :title="altLabel" class="dates-table__altlink">
                    <i class="fa fa-arrow-circle-right"></i> {{ altLabel }}
                </a>
            </div>
        </div>
        <template v-for="(row, index) of datesRows">
-            <div class="modal fade" v-bind:id="'dateservices' + index" role="dialog">
+            <div class="modal fade" :id="'dateservices' + index" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
@@ -2,18 +2,18 @@
    <div class="destinationselect" :class="{ 'loading': loading }">
        <label v-if="showLabel" for="destination" class="destinationselect__label">Finde</label>
        <ul class="nav navbar-nav">
-            <li class="dropdown" v-bind:class="{ open: opened }">
+            <li class="dropdown" :class="{ open: opened }">
                <input type="text" id="destination" class="form-control destinationselect__input"
                       v-model="destination"
-                       v-on:keyup="autocomplete"
-                       v-on:click="toggleOptions"
+                       @keyup="autocomplete"
+                       @click="toggleOptions"
                       placeholder="Ort, Gebiet, Land...">
                <ul ref="itemlist" class="dropdown-menu" aria-labelledby="destination" v-show="showAutocompleteOptions">
                    <template v-for="(section, type) of autocompleteOptions">
                        <template v-if="section.options.length">
-                            <li class="dropdown-header destinationselect__group" v-bind:class="type">{{ section.label }}</li>
+                            <li class="dropdown-header destinationselect__group" :class="type">{{ section.label }}</li>
                            <li class="destinationselect__item" v-for="option of section.options">
-                                <a href="#" v-on:click.prevent="optionSelect(option, type)">{{ option.name }}</a>
+                                <a href="#" @click.prevent="optionSelect(option, type)">{{ option.name }}</a>
                            </li>
                            <li role="separator" class="divider destinationselect__divider"></li>
                        </template>
@@ -3,14 +3,14 @@
        <div class="destinationselect__section" v-for="(destination, uid) of selectableDestinations">
            <div class="checkbox">
                <label>
-                    <input type="checkbox" v-model.number="countryUidsSelected" v-bind:value="uid">
+                    <input type="checkbox" v-model.number="countryUidsSelected" :value="uid">
                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                    <strong>{{ destination.country.label }}</strong>
                </label>
            </div>
            <div class="checkbox" v-for="region of destination.regions">
                <label>
-                    <input type="checkbox" v-model.number="regionUidsSelected" v-bind:value="region.uid">
+                    <input type="checkbox" v-model.number="regionUidsSelected" :value="region.uid">
                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                    <span class="small">{{ region.label }}</span>
                </label>
@@ -10,15 +10,15 @@
                        v-if="destinationOptions && !conceptSelected"
                        v-for="destination of destinationOptions">
                        <div class="destination-pulldown__column">
-                            <a href="#" v-on:click.prevent="optionSelect(destination.country.uid, destination.country.label, 'country')">
-                                <img class="destination-pulldown__flag" v-bind:src="destination.country.flag" alt="">
+                            <a href="#" @click.prevent="optionSelect(destination.country.uid, destination.country.label, 'country')">
+                                <img class="destination-pulldown__flag" :src="destination.country.flag" alt="">
                                <strong>{{ destination.country.label }}</strong>
                            </a>
                        </div>
                        <div class="destination-pulldown__column">
                            <ul class="plain-list">
                                <li v-for="region of destination.regions">
-                                    <a href="#" v-on:click.prevent="optionSelect(region.uid, region.label, 'region')">{{ region.label }}</a>
+                                    <a href="#" @click.prevent="optionSelect(region.uid, region.label, 'region')">{{ region.label }}</a>
                                </li>
                            </ul>
                        </div>
@@ -28,14 +28,14 @@
                        <div class="destination-pulldown__column">
                            <ul class="plain-list">
                                <li v-for="concept of conceptOptions">
-                                    <a href="#" v-on:click.prevent="conceptSelect(concept.uid, concept.name)">{{ concept.name }}</a>
+                                    <a href="#" @click.prevent="conceptSelect(concept.uid, concept.name)">{{ concept.name }}</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="destination-pulldown__section" v-if="destinationSelected || conceptSelected">
                        <button class="destination-pulldown__reset"
-                                v-on:click.prevent="optionReset">
+                                @click.prevent="optionReset">
                            <i class="fa fa-trash-o"></i>
                            zurücksetzen
                        </button>
@@ -6,7 +6,7 @@
                    <div class="row">
                        <div class="col-xs-12">
                            <p>{{ label }}</p>
-                            <select v-model="partnerId" v-on:change="onPartnerSelect">
+                            <select v-model="partnerId" @change="onPartnerSelect">
                                <option value="">Bitte auswählen...</option>
                                <template v-for="partner in partnerIds">
                                    <option :value="partner.id">{{ partner.label }}</option>
@@ -2,7 +2,7 @@
    <div class="hoteltypeselect">
        <div class="checkbox" v-for="hotelTypesOption of hotelTypesOptions">
            <label>
-                <input type="checkbox" v-model.number="hotelTypesSelected" v-bind:value="hotelTypesOption">
+                <input type="checkbox" v-model.number="hotelTypesSelected" :value="hotelTypesOption">
                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                {{ hotelTypesLabels[hotelTypesOption] }}
            </label>
@@ -4,10 +4,16 @@
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                   aria-haspopup="true" aria-expanded="false">{{ selectedOption }} <span class="glyphicon glyphicon-menu-down"></span></a>
+                   aria-haspopup="true" aria-expanded="false">
+                    {{ selectedOption }} <span class="glyphicon glyphicon-menu-down"></span>
+                </a>
                <ul class="dropdown-menu nights">
-                    <li><a href="#" v-on:click.prevent="optionReset">beliebig</a></li>
-                    <li v-for="nightsOption of nightsOptions"><a href="#" v-on:click.prevent="optionSelect(nightsOption)">{{ durationTypes[nightsOption] }} Übernachtungen</a></li>
+                    <li><a href="#" @click.prevent="optionReset">beliebig</a></li>
+                    <li v-for="nightsOption of nightsOptions">
+                        <a href="#" @click.prevent="optionSelect(nightsOption)">
+                            {{ durationTypes[nightsOption] }} Übernachtungen
+                        </a>
+                    </li>
                </ul>
            </li>
        </ul>
@@ -4,10 +4,14 @@
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                   aria-haspopup="true" aria-expanded="false">{{ pax }} <span class="glyphicon glyphicon-menu-down"></span></a>
+                   aria-haspopup="true" aria-expanded="false">
+                    {{ pax }} <span class="glyphicon glyphicon-menu-down"></span>
+                </a>
                <ul class="dropdown-menu pax">
-                    <li v-for="paxOption of paxOptions"><a href="#" v-on:click.prevent="optionSelect(paxOption)">{{ paxOption }}</a></li>
-                    <li v-if="groupsUri"><a v-bind:href="groupsUri">&gt; 20</a></li>
+                    <li v-for="paxOption of paxOptions">
+                        <a href="#" @click.prevent="optionSelect(paxOption)">{{ paxOption }}</a>
+                    </li>
+                    <li v-if="groupsUri"><a :href="groupsUri">&gt; 20</a></li>
                </ul>
            </li>
        </ul>
@@ -4,11 +4,13 @@
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                   aria-haspopup="true" aria-expanded="false">{{ rangeLabel }} <span class="glyphicon glyphicon-menu-down"></span></a>
+                   aria-haspopup="true" aria-expanded="false">
+                    {{ rangeLabel }} <span class="glyphicon glyphicon-menu-down"></span>
+                </a>
                <ul class="dropdown-menu price-range">
-                    <li><a href="#" v-on:click.prevent="optionReset()">beliebig</a></li>
+                    <li><a href="#" @click.prevent="optionReset()">beliebig</a></li>
                    <li v-for="(range, index) in rangeOptions">
-                        <a href="#" v-on:click.prevent="optionSelect(index)">{{ formatRange(range) }} €</a>
+                        <a href="#" @click.prevent="optionSelect(index)">{{ formatRange(range) }} €</a>
                    </li>
                </ul>
            </li>
@@ -5,7 +5,7 @@
            <div class="col-xs-6 text-right">{{dateLabel}}</div>
        </div>
        <div class="dates-table__pricetoggle" v-if="hasSurcharge || hasDiscount">
-            <a href="#" v-if="hasSurcharge" v-on:click.prevent="toggleBus">
+            <a href="#" v-if="hasSurcharge" @click.prevent="toggleBus">
                <template v-if="addBus">
                    <i class="fa fa-car"></i> Preise für Eigenanreise anzeigen
                </template>
@@ -13,7 +13,7 @@
                    <i class="fa fa-bus"></i> Preise für Busanreise anzeigen
                </template>
            </a>
-            <a href="#" v-if="hasDiscount" v-on:click.prevent="toggleDiscount">
+            <a href="#" v-if="hasDiscount" @click.prevent="toggleDiscount">
                <template v-if="discountBus">
                    <i class="fa fa-bus"></i> Preise für Busanreise anzeigen
                </template>
@@ -37,10 +37,10 @@
                    <tr v-for="(row, index) of priceTableRows">
                        <td style="white-space: normal">
                            <a class="pricetable__room-label"
-                               v-bind:href="row.bookingUrl" target="_blank">{{ row.roomName }}</a>
+                               :href="row.bookingUrl" target="_blank">{{ row.roomName }}</a>
                            <div class="hidden-lg" v-if="row.roomAvailable">
                                <a class="button button--small button--action"
-                                   v-bind:href="row.bookingUrl" target="_blank">Jetzt buchen</a>
+                                   :href="row.bookingUrl" target="_blank">Jetzt buchen</a>
                            </div>
                            <div class="hidden-lg" v-if="!row.roomAvailable">
                                <span class="label label-default">ausgebucht</span>
@@ -54,11 +54,11 @@
                        <td>
                            <button v-if="hasOptionalServices(row) && row.roomAvailable" type="button"
                                    class="button button--light button--small hidden-xs tooltiptoggle"
-                                    data-toggle="modal" data-placement="top" v-bind:data-target="'#optservices' + index"
+                                    data-toggle="modal" data-placement="top" :data-target="'#optservices' + index"
                                    title="Alle Zusatzleistungen anzeigen">Optionen</button>
                            <a href="#" v-if="hasOptionalServices(row) && row.roomAvailable" class="hidden-sm hidden-md hidden-lg"
-                               data-toggle="modal" v-bind:data-target="'#optservices' + index"><i class="fa fa-info-circle"></i></a>
-                            <div class="modal fade" v-bind:id="'optservices' + index" role="dialog">
+                               data-toggle="modal" :data-target="'#optservices' + index"><i class="fa fa-info-circle"></i></a>
+                            <div class="modal fade" :id="'optservices' + index" role="dialog">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
@@ -76,7 +76,7 @@
                        </td>
                        <td class="hidden-xs hidden-md">
                            <a class="button button--small button--action" v-if="row.roomAvailable"
-                               v-bind:href="row.bookingUrl" target="_blank">Buchen</a>
+                               :href="row.bookingUrl" target="_blank">Buchen</a>
                            <span v-if="!row.roomAvailable" class="label label-default">ausgebucht</span>
                        </td>
                    </tr>
@@ -85,7 +85,7 @@
        </div>
        <p v-if="!singleDate">
            <a class="button button--small"
-               href="#" v-on:click.prevent="loadDatesTable()"><i class="fa fa-undo"></i> zurück zur Terminübersicht</a>
+               href="#" @click.prevent="loadDatesTable()"><i class="fa fa-undo"></i> zurück zur Terminübersicht</a>
        </p>
       <div class="row">
            <div class="col-md-12">
@@ -2,7 +2,7 @@
    <div class="roomtypeselect">
        <div class="checkbox" v-for="roomTypesOption of roomTypesOptions">
            <label>
-                <input type="checkbox" v-model.number="roomTypesSelected" v-bind:value="roomTypesOption">
+                <input type="checkbox" v-model.number="roomTypesSelected" :value="roomTypesOption">
                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                {{ roomTypesLabels[roomTypesOption] }}
            </label>
@@ -2,13 +2,13 @@
    <div class="watchlist">
        <template v-for="section in teasers">
            <h2 class="headline headline--secondary headline--underlined">{{ section.concept.name }}</h2>
-            <div class="searchresult-section" v-bind:class="'searchresult-section--' + section.concept.code">
+            <div class="searchresult-section" :class="'searchresult-section--' + section.concept.code">
                <search-result-item
                        v-for="item in section.items"
-                        v-bind:key="item.key"
-                        v-bind:item="item"
-                        v-bind:section="section"
-                        v-bind:watchlist="watchlist"></search-result-item>
+                        :key="item.key"
+                        :item="item"
+                        :section="section"
+                        :watchlist="watchlist"></search-result-item>
            </div>
        </template>
        <div class="alert alert-info" v-if="total === 0">
@@ -1,5 +1,5 @@
 <template>
-    <a href="#" v-on:click.prevent="toggleWatchlist()">
+    <a href="#" @click.prevent="toggleWatchlist()">
        <i class="fa tooltiptoggle" :class="{ 'fa-minus-circle': onWatchlist, 'fa-plus-circle': !onWatchlist }"
           data-placement="auto" title="Merkliste +/-"></i>
        <span v-if="layout === 'link'">
@@ -82,4 +82,6 @@
        </div>
    </div>
 </div>
-<a v-on:click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="arrowtop"><i class="fa fa-angle-up"></i></a>
+<a @click.prevent="scrollTop()" v-show="scrollTopVisible" v-cloak href="#" class="arrowtop">
+    <i class="fa fa-angle-up"></i>
+</a>
@@ -126,7 +126,7 @@
                    </f:else>
                </f:if>
            </div>
-            <watchlist-toggle uid="{item.hotel.uid}:{product.uid}" v-bind:watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
+            <watchlist-toggle uid="{item.hotel.uid}:{product.uid}" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
        </div>
    </f:section>

@@ -5,7 +5,7 @@
      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" >

    <f:section name="Mainnav">
-        <div class="navbar-main-wrapper" v-bind:class="{ 'searchbar-fixed': searchbarFixed }">
+        <div class="navbar-main-wrapper" :class="{ 'searchbar-fixed': searchbarFixed }">
            <nav class="container navbar navbar-default navbar-main{f:if(condition: data.tx_eptheme_hide_searchbar, then: ' navbar-main--no-searchbar')}">
                <f:render section="NavbarHeader" arguments="{_all}"/>
                <f:render section="FirstLevel" arguments="{_all}"/>
@@ -20,7 +20,7 @@

    <f:section name="NavbarHeader">
        <div class="navbar-header">
-            <a v-on:click.prevent="toggleMobileNavigation()" type="button" class="navbar-toggle collapsed" id="navtoggle">
+            <a @click.prevent="toggleMobileNavigation()" type="button" class="navbar-toggle collapsed" id="navtoggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
@@ -28,7 +28,7 @@
            </a>
            <f:if condition="{data.tx_eptheme_hide_searchbar}">
                <f:else>
-                    <a v-on:click.prevent="toggleSearchbox()" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
+                    <a @click.prevent="toggleSearchbox()" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </a>
                </f:else>
@@ -119,7 +119,7 @@
            <div>Du hast Fragen?</div>
            <div>Wir können helfen!</div>
            <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn-warning" rel="nofollow">Anrufen</a>
-            <a v-on:click.prevent="scrollTo('#footer')" href="#footer" class="btn btn-warning" rel="nofollow">Whatsapp</a>
+            <a @click.prevent="scrollTo('#footer')" href="#footer" class="btn btn-warning" rel="nofollow">Whatsapp</a>
            <f:if condition="{settings.faqPageUid}">
                <a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn-warning">FAQ</a>
            </f:if>
@@ -11,7 +11,7 @@
                        <li>
                            <a href="{f:uri.typolink(parameter: data.pid, section: 'c{contentElement.uid}')}"
                               class="btn btn-warning ep-sidebar"
-                               v-on:click.prevent="scrollTo('#c{contentElement.uid}')">{contentElement.header}</a>
+                               @click.prevent="scrollTo('#c{contentElement.uid}')">{contentElement.header}</a>
                        </li>
                    </f:for>
                </f:if>
@@ -94,7 +94,7 @@
                    <a href="{uriLink}" title="{teaser.product.name}" class="button button--full searchresult-item__button">Details &amp; Buchen</a>
                </div>
            </div>
-            <watchlist-toggle uid="{teaser.key}" v-bind:watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
+            <watchlist-toggle uid="{teaser.key}" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
        </div>
    </f:section>

@@ -2,7 +2,9 @@
 {namespace ep=EP\EpTheme\ViewHelpers}
 <div class="area-nav">
    <div class="area-nav__inner">
-        <a class="area-nav__trigger area-nav__link" href="#" v-on:click.prevent="toggleAreaNavigation()">Bereich wechseln <i class="area-nav__trigger-icon fa fa-lg fa-caret-down"></i></a>
+        <a class="area-nav__trigger area-nav__link" href="#" @click.prevent="toggleAreaNavigation()">
+            Bereich wechseln <i class="area-nav__trigger-icon fa fa-lg fa-caret-down"></i>
+        </a>
        <nav role="navigation">
            <ul class="area-nav__list">
                <v:menu levels="1" useShortcutUid="1" pageUid="{settings.topNavPid}">
@@ -13,7 +13,7 @@
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="row hidden-lg">
                    <div class="col-md-12 column">
-                        <a href="#teasers" v-on:click.prevent="scrollTo('#teasers')" class="button button--full">Direkt zu den Angeboten</a>
+                        <a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full">Direkt zu den Angeboten</a>
                    </div>
                </div>
            </f:if>
@@ -28,7 +28,7 @@
                </div>
                <div class="col-md-4">
                    <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
-                        <p class="hidden-xs hidden-md"><a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
+                        <p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
                    </f:if>
                    <f:render partial="Facts" arguments="{facts: city.facts}"/>
                    <f:if condition="{city.region.season} == 'w'">
@@ -13,7 +13,9 @@
            <f:if condition="{teasers}">
                <div class="row hidden-lg">
                    <div class="col-md-12 column">
-                        <a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a>
+                        <a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
+                            Direkt zu den Angeboten
+                        </a>
                    </div>
                </div>
            </f:if>
@@ -50,7 +52,7 @@
                <div class="col-md-4">
                    <f:if condition="{teasers}">
                        <p class="hidden-xs hidden-md">
-                            <a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
+                            <a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
                                Direkt zu den Angeboten
                            </a>
                        </p>
@@ -13,7 +13,9 @@
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="row hidden-lg">
                    <div class="col-md-12 column">
-                        <a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a>
+                        <a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
+                            Direkt zu den Angeboten
+                        </a>
                    </div>
                </div>
            </f:if>
@@ -52,7 +54,7 @@
                </div>
                <div class="col-sm-4">
                    <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
-                        <p class="hidden-xs hidden-md"><a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
+                        <p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
                    </f:if>
                    <f:render partial="Facts" arguments="{facts: country.facts}"/>
                </div>
@@ -13,7 +13,7 @@
                                    <li>
                                        <a href="{page.link}#c{element.data.uid}"
                                           class="btn btn-warning ep-sidebar"
-                                           v-on:click.prevent="scrollTo('#c{element.data.uid}')">{element.data.header}</a>
+                                           @click.prevent="scrollTo('#c{element.data.uid}')">{element.data.header}</a>
                                    </li>
                                </f:if>
                            </f:for>
@@ -95,11 +95,11 @@
                    <div class="form__success" v-show="success">
                        <p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
                            setzen.</p>
-                        <p><button class="button button-warning button-small" v-on:click.prevent="resetForm()">Neue Anfrage</button></p>
+                        <p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
                    </div>
                    <div class="form__overlay" v-show="error">
                        <p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
-                        <p><button class="button button-warning button-small" v-on:click.prevent="resetForm()">Neue Anfrage</button></p>
+                        <p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
                    </div>
                </div>
            </contact-form>
@@ -54,11 +54,11 @@
                    <div class="form__success" v-show="success">
                        <p>Vielen Dank für Eure Anfrage. Wir werden uns schnellstmöglich mit Euch in Verbindung
                            setzen.</p>
-                        <p><button class="button button-warning button-small" v-on:click.prevent="resetForm()">Neue Anfrage</button></p>
+                        <p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
                    </div>
                    <div class="form__success" v-show="error">
                        <p>Es ist ein Problem aufgetreten. Bitte versucht es noch einmal.</p>
-                        <p><button class="button button-warning button-small" v-on:click.prevent="resetForm()">Neue Anfrage</button></p>
+                        <p><button class="button button-warning button-small" @click.prevent="resetForm()">Neue Anfrage</button></p>
                    </div>
                </div>
            </contact-form>
@@ -12,7 +12,9 @@
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="row hidden-lg">
                    <div class="col-md-12 column">
-                        <a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a>
+                        <a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
+                            Direkt zu den Angeboten
+                        </a>
                    </div>
                </div>
            </f:if>
@@ -27,7 +29,7 @@
                </div>
                <div class="col-md-4">
                    <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
-                        <p class="hidden-xs hidden-md"><a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
+                        <p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
                    </f:if>
                    <f:render partial="Facts" arguments="{facts: hotel.facts}"/>
                    <f:if condition="{hotel.region.season} == 'w'">
@@ -13,7 +13,9 @@
            <f:if condition="{teasers}">
                <div class="row hidden-lg">
                    <div class="col-md-12 column">
-                        <a href="#teasers" v-on:click.prevent="scrollTo('#teasers')" class="button button--full">Direkt zu den Angeboten</a>
+                        <a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full">
+                            Direkt zu den Angeboten
+                        </a>
                    </div>
                </div>
            </f:if>
@@ -28,7 +30,11 @@
                </div>
                <div class="col-md-4">
                    <f:if condition="{teasers}">
-                        <p class="hidden-xs hidden-md"><a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
+                        <p class="hidden-xs hidden-md">
+                            <a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
+                                Direkt zu den Angeboten
+                            </a>
+                        </p>
                    </f:if>
                    <f:if condition="{region.season} == 'w'">
                        <f:render partial="Facts" arguments="{facts: region.facts}"/>