Vue пишет что метод undefined, хотя это не так. В чем ошибка?

Question

[Greg Orekhov]

пытаюсь запилить часы на странице, но вуй ругается. Вод код:

<el-col :span="8">
				<div class="grid-content">
					<div id="clock">
						<ul>
							<li class="date"><p class="clockdate">{{ date }}</p><p class="clockday">{{ day }}</p></li>
							<li class="time">{{ time }}</li>
						</ul>
					</div>
				</div>
			</el-col>

//////////////////////////// data & time
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: '',
        day: ''
    }
});

//var week = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'];
var week = ['ВОСКРЕСЕНЬЕ', 'ПОНЕДЕЛЬНИК', 'ВТОРНИК', 'СРЕДА', 'ЧЕТВЕРГ', 'ПЯТНИЦА', 'СУББОТА'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getDate(), 2) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getFullYear(), 4);
    clock.day = week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

Вот что выдает в ошибках:

vue.js:597 [Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
vue.js:597 [Vue warn]: Property or method "day" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
vue.js:597 [Vue warn]: Property or method "time" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
backend.js:1  vue-devtools  Detected Vue v2.5.17

Answer 1

[0xD34F]

Ну, во-первых не метод, а свойство.

А во-вторых - всё-таки так, undefined. Вы монтируете второй экземпляр Vue внутрь первого. Зачем вам такое могло понадобиться - лично мне фантазии представить не хватает. Первый экземпляр при компиляции конечно же обрабатывает ту часть шаблона, которая по вашей мысли предназначена для второго. Отсюда и ошибки - у первого экземпляра нет тех свойств, которые есть у второго, и которые используются в шаблоне.

Что делать? Ну, первый вариант очевиден - избавьтесь от второго экземпляра Vue, перенесите его данные в первый, или сделайте отдельный компонент - это уж вам виднее. Второй, это если вам вот прям кровь из носу надо чтобы экземпляров было два и один монтировался внутрь другого - используйте v-pre (опасно, если при обновлении внешнего экземпляра окажется затронут элемент, к которому примонтирован внутренний - внутренний экземпляр отвалится).

Comments

[Greg Orekhov]

Спасибо, я так и думал, первый экземпляр заставляет отрабатывать верстку от элементс, второй - уже внутри этой верстки с часами. Благодарю за помощь

[Greg Orekhov]

сделал с v-pre, все заработало, как разберусь, как написать отдельный компонент, переделаю