Как я могу сделать значение в Vue.js нереактивным?

Question

В моем приложении Vue.js у меня есть значение массива, которое должно обновляться только тогда, когда пользователь выполняет определенное действие «обновить».Однако, как только я присваиваю новое значение этому значению массива, значение массива становится реактивным и мгновенно изменяется при изменении данных в назначенном значении.Значение массива должно оставаться нереактивным.

Например, у меня есть метод refresh(), который при запуске должен обновлять displayedData, который не должен быть реактивным, с currentData, которыйдолжен быть реактивным.displayedData должно обновляться только при вызове обновления.

methods: {
    refresh: function() {
        this.displayedData = this.currentData;
    }
}

Answer 1

Подход (БЕЗ отключения реактивности) состоит в том, чтобы использовать другой массив для ваших временных данных и перемещать материал в хороший массив, когда пользователь нажимает кнопку обновления.

Вы можете скопировать значения в первом массивево временный массив, например this.temp = this.permanent.slice() в функции жизненного цикла created или mounted.

Срез будет делать поверхностную копию массива.Если вам нужно также клонировать элементы в массиве, то, возможно, используйте некоторую библиотеку глубокого копирования или метод JSON.parse(JSON.stringify(...)).

Answer 2

Если вы НЕ добавляете currentData в метод data (), он не будет реагировать.

export default {
    currentData: [],
    data() {
        return {

        }
    },
    methods: {
        refresh: function() {
            this.displayedData = this.currentData;
        }
    }
}

В этом случае вы все равно можете ссылаться на currentData в разделе, используя {{ $options.currentData }}

Answer 3

Чтобы сделать значение не реагирующим, не сделав его статичным, вы можете сделать его «копию» с помощью JSON для кодирования, а затем декодирования.

this.displayedData = JSON.parse(JSON.stringify(this.currentData));

Это присваивает текущее состояние одного значенияк другому значению, и никакие изменения первого значения не изменят второе значение, пока этот код не будет запущен снова.