Vue не обновляет вычисление, если не принудительно

Мне нужно добавить дополнительные строки, заставляющие Vue пересчитывать вычисляемую опору, а именно:

var foo = this.groups;
this.groups = {};
this.groups = foo;

как видно в этой скрипте: https://jsfiddle.net/8bqv29dg/. Без них available_groups не обновляется.

Почему это так и как правильно обновить available_groups с помощью groups?

Пробовали добавить groups к «глубокому просмотру», но это не помогло.

javascript vue.js

10.04.2019 14:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте $set, чтобы добавить новое свойство для объекта данных:

   methods: {
    add_group: function(key, name) {
      this.$set(this.groups, key, {key, name});
    },
  }

Здесь описал реактивность vue

10.04.2019 14:34

Ответ принят как подходящий

Vue не отслеживает новые элементы, добавленные к объекту:

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Предостережения

Одним из решений является использование Vue.set или переназначение объекта, как в примере ниже:

new Vue({
  el: "#app",
  data: {
    groups: {1: {key: 1, label: 'Those guys'}},
  },

  computed: {
    available_groups: function() {
        return [{value: 0, label: 'Anyone'}].concat(Object.values(this.groups)); 
        },
    },
  methods: {
    add_group: function(key, name) {
        Vue.set(this.groups, key, {key: key, name: name})
    },
  }
})

10.04.2019 14:43

Другие вопросы по теме

Vue multiselect с аксиальным вызовом базы данных, laravel

Как передать аргумент функции в VueJS

VueJS: обратный массив данных не влияет

Протестируйте экспортированный модуль с помощью Jest Mock в Vue

Группа списка внутри диалогового окна отображает заголовок не в правильном положении

Прокси-сервер Vue devServer не помогает, я все еще получаю ошибку CORS

Как реализовать новую нижнюю панель приложений Material Design

Как получить значение запроса на получение в Javascript

Поймать и обработать ошибку отказа в подключении с помощью Axios

Внутренняя ошибка сервера: /undefined в конце URL-адреса для запроса на удаление

Vue не обновляет вычисление, если не принудительно

Ответы 2

Другие вопросы по теме

Похожие вопросы