Некорректное отображение калькулятора на сайте
Сделала калькулятор на сайте WordPress, но почему-то калькулятор корректно отображается только когда находишься в админ панели сайта, для неавторизованных пользователей калькулятор некорректно отображается, там просто вместо цифр сам код виден. Вот сам код калькулятора:
<section class="content-section">
<div class="calc" id="calc">
<div class="calc-payment" v-bind:class="{ screen: isActive }">
<h2 class="title_calc">Калькулятор лизинга</h2>
<div class="calc-field">
<div class="request-field">
<label class="range-label">Стоимость</label>
<input class="range-field" v-model.number="price" />
</div>
<vue-slider v-model.number="price" :min="200000" :max="20000000" :interval="1000" :tooltip-formatter="val => formatPrice(val) + ' ₽'"></vue-slider>
<span class="calc-field-limited">от 200 000 до 20 000 000 ₽</span>
</div>
<div class="calc-field">
<div class="request-field-flex">
<div class="request-field request-field__left" v-if="advanceType == '%'">
<label class="range-label">Аванс</label>
<input class="range-field" type="text" v-model="advancePercent" />
<vue-slider v-model.number="advancePercent" :min="5" :max="49" :tooltip-formatter="'{value} %'"></vue-slider>
<span class="calc-field-limited">от 5 до 49 %</span>
</div>
<div class="request-field request-field__left" v-if="advanceType == '₽'">
<label class="range-label">Аванс</label>
<input class="range-field" type="text" v-model="advanceRub" />
<vue-slider v-model.number="advanceRub" :min="price*0.05" :max="price*0.49" :tooltip-formatter="val => formatPrice(val) + ' ₽'"></vue-slider>
<span class="calc-field-limited">от {{formatPrice(price*0.05)}} до {{formatPrice(price*0.49)}} ₽</span>
</div>
<div class="request-field__right">
<v-select v-model="advanceType" :options="['₽','%']" :clearable="false" :searchable="false"></v-select>
</div>
</div>
</div>
<div id="srok" class="calc-field">
<div class="request-field">
<label class="range-label">Срок</label>
<input class="range-field" v-model="term" />
</div>
<vue-slider v-model="term" :min="12" :max="60" :tooltip-formatter="'{value} мес.'"></vue-slider>
<span class="calc-field-limited">от 12 до 60 мес.</span>
</div>
</div>
<div class="calc-result" v-bind:class="{ screen: !isActive }">
<div class="calc-result__mobile">
<div class="calc-result__mobile_item">
</div>
<div class="calc-result__mobile_item">
</div>
<div class="calc-result__mobile_item">
</div>
</div>
<div class="calc-data-wrap">
<div class="calc-data">
<div class="calc-data__item">
<div class="calc__dt">Платёж в месяц</div>
<div class="calc__dd">{{formatPrice(payment)}} ₽</div>
</div>
<div class="calc-data__item">
<div class="calc__dt">Сумма договора лизинга</div>
<div class="calc__dd">{{formatPrice(agreementAmount)}} ₽</div>
</div>
<div class="calc-data__item">
<div class="calc__dt">Годовое удорожание</div>
<div class="calc__dd">{{yearIncrase}} %</div>
</div>
</div>
<div class="calc-benefit">
<div class="calc-subhead">Выгода по налогам</div>
<div class="calc-data__item">
<div class="calc__dt">Сумма НДС к зачёту</div>
<div class="calc__dd">{{formatPrice(creditedVAT)}} ₽</div>
</div>
<div class="calc-data__item">
<div class="calc__dt">Экономия по налогу на прибыль</div>
<div class="calc__dd">{{formatPrice(taxSavings)}} ₽</div>
</div>
<div class="calc-data__item">
<div class="calc__dt">Общие затраты на приобретение</div>
<div class="calc__dd">{{formatPrice(acquisitionCost)}} ₽</div>
</div>
</div>
<div class="calc-dis">
</div>
<a href="https://leasingber.ru/app/" class="btn btn-active">Заявка на лизинг</a>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
<div class="b-request-field">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
var app = new Vue({
el: '#calc',
data: {
price: 1000000,
term: 60,
branch: [],
rate: 0.224,
advancePercent: 10,
advanceRub: 55000,
advanceType: '%',
oniPercent: 3,
isActive: true
},
created: function () {
if(4227)
this.switchRate(4227);
},
methods: {
formatPrice: function(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
},
switchRate: function(val){
switch(val){
case 1934:
this.rate = 0.175;
break;
case 1933:
this.rate = 0.185;
break;
case 4741:
this.rate = 0.195;
break;
case 1942:
this.rate = 0.195;
break;
default:
this.rate = 0.224;
break;
}
}
},
components: {
VueSlider: window['vue-slider-component']
},
watch: {
advanceType: function (val) {
if(val == '%')
this.advancePercent = Math.ceil(this.advanceRub/this.price*100);
if(val == '₽')
this.advanceRub = Math.ceil(this.price*this.advancePercent/100);
},
isActive: function() {
if(this.advanceType == '%')
this.advanceRub = Math.ceil(this.price*this.advancePercent/100);
},
price: function (val) {
if (val*0.05>this.advanceRub)
this.advanceRub = Math.ceil(val*0.05);
if (val*0.49<this.advanceRub)
this.advanceRub = Math.ceil(val*0.49);
},
branch: function (val) {
this.switchRate(val.code)
}
},
computed:{
payment: function(){
if(this.advanceType == '₽')
this.advancePercent = Math.ceil(this.advanceRub/this.price*100);
return Math.round(this.price * ((100 - this.advancePercent) / 100 * Math.pow(1 + this.rate / 12, this.term) - this.oniPercent/100) / (Math.pow(1 + this.rate / 12, this.term) - 1) * this.rate / 12);
},
agreementAmount: function(){
return this.price*this.advancePercent/100 + this.payment * this.term;
},
creditedVAT: function() {
return Math.round((this.agreementAmount + this.price*this.oniPercent/100) / (1 + 0.2) * 0.2);
}
,
taxSavings: function() {
return Math.round((this.agreementAmount + this.price*this.oniPercent/100) / (1 + 0.2) * 0.2);
},
acquisitionCost: function(){
return Math.round((this.agreementAmount + this.price*this.oniPercent/100) - (this.creditedVAT + this.taxSavings));
},
yearIncrase: function(){
return (((this.agreementAmount-this.price)*100/this.price)/(this.term/12)).toFixed(2);
}
},
})
На скрине показано как калькулятор отображается для незарегистрированных пользователей
