de-vraag
  • Вопросы
  • Метки
  • Пользователи
Оповещения
Вознаграждения
Регистрация
После регистрации, сможете получать уведомления об ответах и комментариях на Ваши вопросы.
Вход
Если у Вас уже есть аккаунт, войдите чтобы проверить новые уведомления.
Тут будут вознаграждения за добавленные вопросы, ответы и комментарий.
Дополнительно
Источник
Редактировать
 Dave
Dave
Вопрос

Можете ли вы заставить Vue.js перезагрузиться/отремонтироваться?

Небольшой вопрос.

Можете ли вы заставить Vue.js перезагрузить/пересчитать все? Если да, то как?

178 2015-08-19T21:43:52+00:00 16
Valeriu
Valeriu 50848
Редактировал вопрос 26-го декабря 2021 в 9:58
Программирование
javascript
vue.js
Востребованные видео
Vue js #11 Vue компоненты и props - Vue components and props
Vue js #11 Vue компоненты и props - Vue components and props
2 года назад
Типичные ошибки (vue/react) из-за незнания основ javascript
Типичные ошибки (vue/react) из-за незнания основ javascript
1 год назад
Постигаем Vue js: урок 4 - реактивность и решение ее основных проблем
Постигаем Vue js: урок 4 - реактивность и решение ее основных проблем
2 года назад
Сервис по аудиту сайта на Nuxt.js №2 Github, Vue.Draggable
Сервис по аудиту сайта на Nuxt.js №2 Github, Vue.Draggable
1 год назад
#10 Криптономикон-1 - Vue.js: практика
#10 Криптономикон-1 - Vue.js: практика
1 год назад
Vue.js — открытый фреймворк для разработки веб-приложений
Vue.js — открытый фреймворк для разработки веб-приложений
2 года назад
Почему вы просто обязаны использовать VUEX в своем приложении!
Почему вы просто обязаны использовать VUEX в своем приложении!
2 года назад
Vue js уроки - Приложение. Маршрутизация
Vue js уроки - Приложение. Маршрутизация
3 года назад
Стоит ли учить Vue.js в 2021 году
Стоит ли учить Vue.js в 2021 году
1 год назад
Вот зачем нужен Vue.js 🔥 Простое объяснение за 2 минуты
Вот зачем нужен Vue.js 🔥 Простое объяснение за 2 минуты
1 год назад
Vue 3 фундаментальный курс от А до Я
Vue 3 фундаментальный курс от А до Я
10 месяцев назад
Постигаем Vue js: урок 8 - vue-router продвинутая маршрутизация
Постигаем Vue js: урок 8 - vue-router продвинутая маршрутизация
1 год назад
Vue.js или как наконец отказаться от React [ru] / Андрей Грачёв
Vue.js или как наконец отказаться от React [ru] / Андрей Грачёв
5 лет назад
« Назад
Вперёд »
Решение / Ответ
Boris Mossounov
Boris Mossounov
14-го ноября 2016 в 10:45
2016-11-14T10:45:32+00:00
Дополнительно
Источник
Редактировать
#28417469

Попробуйте это волшебное заклинание:

vm.$forceUpdate();

Не нужно создавать никаких висячих варов :)

Обновление: Я нашел это решение, когда только начал работать с VueJS. Однако дальнейшее изучение показало, что данный подход является костылем. Насколько я помню, через некоторое время я избавился от него, просто поместив все свойства, которые не обновлялись автоматически (в основном вложенные) в вычисляемые свойства.

Больше информации здесь: https://vuejs.org/v2/guide/computed.html

Valeriu
Valeriu 50848
Редактировал ответ 26-го декабря 2021 в 9:57
Computed Properties | Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
192
0
Brian Kung
Brian Kung
12-го февраля 2018 в 8:44
2018-02-12T20:44:22+00:00
Дополнительно
Источник
Редактировать
#28417470

Это кажется довольно чистым решением от matthiasg по этому вопросу:

вы также можете использовать :key="someVariableUnderYourControl" и менять ключ, когда вы хотите, чтобы компонент был полностью перестроен.

В моем случае я передавал геттер Vuex в компонент в качестве реквизита. Каким-то образом Vuex получал данные, но реактивность не срабатывала надежно, чтобы перерисовать компонент. В моем случае установка компонента key на некоторый атрибут в реквизите гарантировала обновление, когда геттеры (и атрибут) наконец разрешались.

Valeriu
Valeriu 50848
Редактировал ответ 26-го декабря 2021 в 9:57
Any way to force re-render? · Issue #356 · vuejs/Discussion · GitHub
Didn't find anything in the docs or from online sources. Can you force re-render a Vue instance? Also a related question, is it possible to disable caching on the computed properties. In certain cases, I do want the properties to be calc...
github.com
matthiasg (matthiasg) · GitHub
Developing since 1985. Lead Developer at curasystems GmbH. My first love was C, but doing mostly Javascript/Typescript lately. Architect of Äppic. - matthiasg
github.com
66
0
 acdcjunior
acdcjunior
14-го апреля 2018 в 5:37
2018-04-14T17:37:25+00:00
Дополнительно
Источник
Редактировать
#28417472

Почему?

...вам нужно принудительное обновление?

Возможно, вы не изучили Vue с лучшей стороны:

Чтобы Vue автоматически реагировал на изменения значений, объекты должны быть изначально объявлены в data. Или, если нет, они должны быть добавлены с помощью Vue.set().

Смотрите комментарии в демонстрации ниже. Или откройте ту же демонстрацию в JSFiddle здесь.

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');

      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})
/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

Чтобы освоить эту часть Vue, ознакомьтесь с Official Docs on Reactivity - Change Detection Caveats. Это обязательное чтение!

Valeriu
Valeriu 50848
Редактировал ответ 26-го декабря 2021 в 9:58
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Reactivity in Depth | Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
31
0
 denis.peplin
denis.peplin
21-го января 2016 в 1:01
2016-01-21T13:01:54+00:00
Дополнительно
Источник
Редактировать
#28417467

Используйте vm.$set('varName', value). Подробности ищите в Change_Detection_Caveats.

22
0
 Yash
Yash
25-го января 2019 в 2:42
2019-01-25T14:42:28+00:00
Дополнительно
Источник
Редактировать
#28417475

Пожалуйста, прочитайте это http://michaelnthiessen.com/force-re-render/

Ужасный путь: перезагрузка всей страницы <БР> Грозный способ: с помощью V-если рубить <БР> Лучший способ: используя Vue в встроенный способ forceUpdate <БР> Лучший способ: ключ-изменения в компоненте <БР>

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

Я также использовать часы в некоторых ситуациях.

The correct way to force Vue to re-render a component - Michael Thiessen
Sometimes Vue&#x27;s reactivity system isn&#x27;t enough, and you just need to re-render a component. Or maybe you just want to blow away the current DOM and start over. So how do you get Vue to re-render a component the right way?
michaelnthiessen.com
17
0
Poy Chang
Poy Chang
8-го июня 2018 в 9:06
2018-06-08T09:06:55+00:00
Дополнительно
Источник
Редактировать
#28417473

Попробуйте использовать этот$.маршрутизатор.перейти(0);`, чтобы вручную обновить текущую страницу.

14
0
 mgoetzke
mgoetzke
18-го августа 2018 в 2:34
2018-08-18T14:34:06+00:00
Дополнительно
Источник
Редактировать
#28417474

Конечно .. можно просто использовать ключ атрибута для группы рендеринг (отдыха) в любое время.

в<компонент MyComponent :ключ="и somevalueunderyourcontrol" и></компонент MyComponent>``

См

для примера

Она также обсуждалась здесь: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

Any way to force re-render? · Issue #356 · vuejs/Discussion · GitHub
Didn&#39;t find anything in the docs or from online sources. Can you force re-render a Vue instance? Also a related question, is it possible to disable caching on the computed properties. In certain cases, I do want the properties to be calc...
github.com
13
0
 Geoff
Geoff
8-го марта 2018 в 8:56
2018-03-08T20:56:15+00:00
Дополнительно
Источник
Редактировать
#28417471

используя V-если директива

<div v-if="trulyvalue">
    <component-here />
 </div>

Так, просто изменив значение trulyvalue с false на True вызовет снова компонента между див повторно

4
0
Laszlo  the Wiz
Laszlo the Wiz
3-го сентября 2016 в 10:11
2016-09-03T22:11:27+00:00
Дополнительно
Источник
Редактировать
#28417468

Я нашел способ. Он немного хитрый, но работает.

vm.$set("x",0);
vm.$delete("x");

Где vm - объект вашей модели представления, а x - несуществующая переменная.

Vue.js будет жаловаться на это в консольном журнале, но это действительно вызывает обновление всех данных. Проверено на версии 1.0.26.

2
0
 sean717
sean717
22-го февраля 2019 в 8:39
2019-02-22T08:39:23+00:00
Дополнительно
Источник
Редактировать
#28417476

Это работает для меня.

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

Другой компонент пожаров обновить-магазинах-список событий приведет к текущему компоненту повторно

2
0
Pushkar Shirodkar
Pushkar Shirodkar
19-го ноября 2019 в 6:08
2019-11-19T06:08:01+00:00
Дополнительно
Источник
Редактировать
#28417481
<my-component :key="uniqueKey" />

наряду с этим используют это.$набор(параметр obj,'obj_key',значение) и обновления uniqueKey для каждого обновления в объекте (Объект) значение за каждое обновление это.uniqueKey++

он работал для меня этот путь

2
0
Felix Labayen
Felix Labayen
27-го сентября 2019 в 10:01
2019-09-27T10:01:25+00:00
Дополнительно
Источник
Редактировать
#28417480

Для того, чтобы перезагрузить/перерисовки компонента/обновить, остановить длинные коды. Есть Vue.JS способов сделать это.

Просто используйте `:ключевой атрибут.

Например:

<мой-компонент :ключ=на"уникальную" />

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

 IlGala
IlGala
Редактировал ответ 27-го сентября 2019 в 10:29
2
0
 curveball
curveball
23-го ноября 2019 в 2:32
2019-11-23T14:32:35+00:00
Дополнительно
Источник
Редактировать
#28417482

Другим способом является привлечение вю-маршрутизатор, которые обычно так или иначе используется в большинстве приложений.

Например, вам нужно обновить/обновление крючки причиной' исполнения на всех/только некоторые компоненты, к моменту выхода на страницу. Вы можете быть заинтересованы в обновлении не компонент маршрут (не используется в разделе маршрутизации как компонент's стоимостью имущества), поэтому навигация охранники не сработает. Также компонент может быть использован повторно, я имею в виду Vue может брать его из кэша, избегая срабатывания крючки жизненного цикла. Так что, в таком случае вы все еще можете достичь цели путем передачи уникальный Стоимость от маршрутизатора к компоненту маршрут

path: ":model",
name: "model",
component: MyComponent,
props: (route) => ({
    // other props...
    timestamp: + new Date()
})

Тогда вы должны принять этот реквизит как реквизит: ['метка']` в компоненте маршрут и пройти его вниз к компонентам ребенка, в каком обновлении вас интересует. Затем использовать его в качестве атрибута элемента или внутри невидимых тегов. Если вы Don'т использовать его в любом месте в шаблоне, это не вызовет каких-либо обновление, если у вас - каждый раз, когда вы нажмете, что маршрут уникальное значение генерируется и передается на маршрут компонента и его детей, где вы можете вызвать их обновление с помощью передаваемого через реквизит значение в шаблон.

 curveball
curveball
Редактировал ответ 23-го ноября 2019 в 2:54
0
0
Rai  Ahmad Fraz
Rai Ahmad Fraz
22-го апреля 2019 в 9:31
2019-04-22T09:31:58+00:00
Дополнительно
Источник
Редактировать
#28417477

:ключ=" по$маршрут.параметры.параметр1" просто использовать ключ с задать любые параметры своего авто релоад детей..

Rai  Ahmad Fraz
Rai Ahmad Fraz
Редактировал ответ 22-го апреля 2019 в 1:04
0
0
 tuwilof
tuwilof
20-го июня 2019 в 9:33
2019-06-20T21:33:54+00:00
Дополнительно
Источник
Редактировать
#28417478

Работал для меня

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }
0
0
 Jason
Jason
31-го августа 2019 в 3:25
2019-08-31T03:25:38+00:00
Дополнительно
Источник
Редактировать
#28417479

Я имел эту проблему с фотографией, что я хотел повторно в связи с изменениями, внесенными на другую вкладку. Так вкладке tab1 = imageGallery, таб2 = favoriteImages

вкладку изменить=на&[email protected]; updateGallery () на" -> это заставляет мой V-для директивы для обработки функции filteredImages каждый раз, когда я переключения вкладок.

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tab: null,
      colorFilter: "",
      colors: ["None", "Beige", "Black"], 
      items: ["Image Gallery", "Favorite Images"]
    };
  },
  methods: {
    filteredImages: function() {
      return this.$store.getters.getImageDatabase.filter(img => {
        if (img.color.match(this.colorFilter)) return true;
      });
    },
    updateGallery: async function() {
      // instance is responsive to changes
      // change is made and forces filteredImages to do its thing
      // async await forces the browser to slow down and allows changes to take effect
      await this.$nextTick(function() {
        this.colorFilter = "Black";
      });

      await this.$nextTick(function() {
        // Doesnt hurt to zero out filters on change
        this.colorFilter = "";
      });
    }
  }
};
</script>
0
0
Похожие сообщества 19
JavaScript Jobs — чат
JavaScript Jobs — чат
24 536 пользователей
JavaScript Jobs — чат для поиска работы и людей Правила оформления: @telegram-ru/r1WQe5F1m" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru
Открыть telegram
Vue.js - русскоговорящее сообщество
Vue.js - русскоговорящее сообщество
9 077 пользователей
Общаемся на темы, посвященные Vue.js и опыту его использования. Нормы поведения: https://cutt.ly/QFPWXA Nuxt.js: @nuxtjs_ru Вакансии тут: @vuejs_jobs
Открыть telegram
JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
9 060 пользователей
Помогаем друг другу разбираться с JS Правила: @js_noobs_ru/rules" rel="nofollow noopener noreferrer" class="text-blue hover:text-black link" target="_blank">https://teletype.in/@js_noobs_ru/rules Другие полезные чаты — https://github.com/goq/telegram-list или https://rudevs.network/ByKT2JwWQ
Открыть telegram
Клуб Vue.js-разработчиков
Клуб Vue.js-разработчиков
7 872 пользователей
Правила поведения: https://gitlab.com/vuejs-club/rules
Открыть telegram
JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
7 407 пользователей
Рекомендуем сразу отключить уведомления Правила: https://git.io/JycBd См. также: @js_noobs_ru, @nodejs_ru, @ts_cool, @react_js, @electron_cool Вакансии и поиск работы: @javascript_jobs
Открыть telegram
JavaScript.Ninja
JavaScript.Ninja
4 057 пользователей
Правила поведения проекта https://telegra.ph/Kodeks-povedeniya-proekta-JavaScriptNinja-12-15
Открыть telegram
Добавить вопрос
Категории
Все
Технологий
Культура / Отдых
Жизнь / Искусство
Наука
Профессии
Бизнес
Пользователи
Все
Новые
Популярные
1
Zuxriddin Muydinov
Зарегистрирован 1 час назад
2
Денис Анненский
Зарегистрирован 2 дня назад
3
365
Зарегистрирован 6 дней назад
4
True Image
Зарегистрирован 1 неделю назад
5
archana agarwal
Зарегистрирован 1 неделю назад
DE
EL
ES
FR
ID
JA
KO
NL
PT
RO
RU
ZH
© de-vraag 2022
Источник
stackoverflow.com
под лицензией cc by-sa 3.0 с атрибуцией