странное поведение при попытке повторного рендеринга данных внутри слота в vue - PullRequest
Новая
       21

странное поведение при попытке повторного рендеринга данных внутри слота в vue

0 голосов
/ 25 января 2020

Я получаю странное поведение при попытке динамически обновить содержимое слота в Vue с помощью Vuetify. Я уверен, что это просто функция неправильного понимания того, как работают слоты.

У меня есть слот в пользовательском компоненте, например так: 

<template #selectButtons="slotProps">
      <v-icon @click="dropToggle(slotProps.player)"    
         :color="dropColor(slotProps.player)"
         class="mr-5"
       >
         fas fa-skull-crossbones
       </v-icon>
</template>

Когда пользователь нажимает на значок, он предназначен для переключения значка на разные цвета.

Я не могу заставить dropColor последовательно запускать каждый щелчок, ОДНАКО странно, если я внесу некоторые изменения в компоненте <v-icon> как, скажем, я просто добавляю {{dropColor(slotProps.player)}} внутри тегов v-icon, и вдруг код будет работать.

Но тогда, если я сделаю полную ссылку sh страницы, она перестанет работать , Затем я удаляю этот код и вставляю его обратно, затем он снова работает!

Я пробовал forceUpdate и ключи на теге v-icon.

Буду признателен за любую помощь

1 Ответ

0 голосов
/ 25 января 2020

Вы пытаетесь передать функцию dropColor(slotProps.player) в качестве реквизита. Лучшая идея - заменить функцию на объект или переменную и изменить этот объект / переменную в методе dropToggle(slotProps.player) после запуска события @click.

...