Уместно ли использование здесь жизненного цикла mounted?

Question

[Alex_87]

Здравствуйте! Прошу посмотреть код и сказать, почему не работает функция onScroll, которая должна в конце скролла, отображать блок с checkbox и radiobutton:
https://codesandbox.io/s/mystifying-yalow-rsb04?fi...

В идеале должно работать следующим образом:
1) При скролле блока до низу, появляется блок с checkbox и radiobutton
2) При нажатие на checkbox, кнопка должна разблокироваться

P.S. Уважаемые админы. Просьба не удалять этот вопрос, поскольку подобного вопроса нет! Совсем нет!!! Будьте внимательнее пожалуйста. С Новым годом!

Comments

[0xD34F]

Уместно освоить js, прежде чем приступать к vue.

Ещё уместно - не нарушать правила.

[Alex_87]

0xD34F, Скажи пожалуйста, какие правила я нарушил?

P.S. Естественно я сначала освоил js и только после перешёл к изучению vue

[0xD34F]

Alex_87,

какие правила я нарушил?

Переходите по ссылке, смотрите, как написанное там соотносится с содержимым вашего вопроса.

Естественно я сначала освоил js

Косяк в показанном коде такой, что ваши знания js можно округлить до нуля, их нет вообще.

[Alex_87]

0xD34F, Давайте не будем оценивать мой знания js, как и вашу культуру общения! Я пришёл сюда за тем, чтобы мне помогли! А судя по тому, как грубо вы себя ведёте, могу с уверенностью сказать, что как раз ВЫ не понимаете куда вы пришли и что вы должны здесь делать. Освежите память касаемо своих обязанностей. Вместо того, чтобы спокойно помочь, вы плюетесь ядом, при чём даже не объясняя почему вы это делаете, равно как и что за ошибка в коде! Вместо того, что не тратить время на пустые обвинения, которые принижают вас как человека, лучше бы помогли, пусть даже наводящими вопросами, которые помогли бы в конечном итоге решить проблему.
И ещё, прошу переадресовать мой вопрос другому модератору, поскольку с вами я не хочу более говорить, если вы не в состоянии объяснить, что не так с вопросом!

[0xD34F]

Вместо того, чтобы спокойно помочь

Уже помог. Когда вы опубликовали этот вопрос в первый раз, я предложил ссылку на решённый вопрос с косяком, аналогичным вашему. Вместо того, чтобы хоть немного напрячь голову, вы предпочли вопрос удалить и задать заново. Вот уж действительно,

Я пришёл сюда не за тем, чтобы мне помогли!

[0xD34F]

вы не в состоянии объяснить, что не так с вопросом

Никто не обязан вам ничего объяснять. Читайте правила, разбирайтесь. "Незнание закона не освобождает от ответственности".

[Alex_87]

0xD34F,

Уже помог. Когда вы опубликовали этот вопрос в первый раз, я предложил ссылку на решённый вопрос с косяком, аналогичным вашему.

Не было в ваших предложенных ссылках решение данного вопроса, поскольку моя проблема относится не к js, а ко VUE. Дело даже не столько в хуки mounted, а в том, как сделать так, чтобы он cработал когда нужно. Если нужно подвязать на событие и использовать не хуки а метод, поскольку хуки здесь не обязательно, то на какое событие его подвесить(я пробовал на событие scroll. alert в теле срабатывал, но this.show = true, нет. Плюс, alert не удалялся при клике на кнопку, что вообще не понятно) И второй, небольшой вопрос. как при клике на checkbox, разблокировать кнопку. Вопросы чисто по VUE
P.S. Опечатка не является преступление. Это просто опечатка.

[0xD34F]

Не было в ваших предложенных ссылках решение данного вопроса, поскольку моя проблема относится не к js, а ко VUE.

Скромно полагаю, что мне виднее, к чему относится ваша проблема. Думайте.

Это просто опечатка.

Конечно опечатка. Но невольное саморазоблачение получилось на пять баллов. Не хотите думать сами - катитесь на фриланс.

[Alex_87]

0xD34F,

Но невольное саморазоблачение получилось на пять баллов

Что вы придумываете? Я вам искренне желаю совершить подобную опечатку и поймать такого же клеща, который прицепиться на ровном месте. Лучше вы бы направили свою внимательность на то, чтобы присмотреться к сути вопроса и понять, что нужно написать в ответ!
Я ещё раз повторяю, что в ваших рекомендациях не было решение данного вопроса. Можете ещё раз скинуть и вместе убедимся в этом!

[0xD34F]

Я ещё раз повторяю, что в ваших рекомендациях не было решение данного вопроса.

Между "не было" с одной стороны и "я ничего не понял" или "мне лень разбираться самостоятельно" с другой есть существенная разница.

Можете ещё раз скинуть и вместе убедимся в этом!

Не думаю, что вы способны в чём-то убедиться. Но для остальных, кто этот вопрос откроет и заглянет в комментарии, можно и "скинуть": Почему не работает функция через setInterval в хуке created?

Ну и проблемный кусок кода (на момент публикации этого комментария так ничего и не исправлено):

data: () => ({
  show: false,
  checked: false
}),
mounted() {
  $("#data").scroll(function () {
    console.log(1111);
    if (this.scrollHeight - this.scrollTop === this.clientHeight) {
      this.show = true;
    }
  });
},

Напоминаю, повыше человек утверждает, что он "освоил js". Ага-ага.

[Сергей delphinpro]

С пониманием контекста в js, особенно у новичков, часто бывают проблемы.
В это куске кода

if (this.scrollHeight - this.scrollTop === this.clientHeight) {
      this.show = true;
    }

идет обращение к одному и тому же объекту через this, но логика должна подсказать, что объекты там разные - первый window, второй - экземпляр vue. Потому и не работает.

Answer 1

[Андрей Охотников]

mounted тут не нужен, можно повесить на нужный див обработчик
v-on:scroll.native="handleScroll"

и в methods создать функцию

methods: {
          handleScroll(e) {
            console.log(this);
          }
        }