@Dmi3ii

Как отключить реактивность в компоненте?

Добрый день.

Есть компонент (форма редактирования) в нее летит объект (массив). При создании я хочу объект сохранить и отслеживать изменения полей (computed isChanged). При изменении item.department меняется и item_loaded.department. Подскажите как отключить реактивность? Через $options не получилось. Есть задумка попробовать через Vuex, но кажется есть способ проще...

<template>
  <div>
    <h3 class="headline">Редактор</h3>
    <code>({{item_loaded.department}}={{item.department}})</code> //реактивно. всегда равно
    <h3 v-show="isChanged">(изменение)</h3>

    <v-autocomplete
        :items    = "app.departments"
        v-model = "item.department"
        label   = "Отдел"
    />

    <v-btn @click="save()" color="info">
        <v-icon left>fa-save</v-icon>Сохранить
    </v-btn>
  </div>
</template>

<script>
export default {
  props: {
      item: {
          type    : Object,
          default : null
      },
  },

  data() {
    return {
        item_loaded : null
    }
  },

  created() {
    this.item_loaded = this.item
  },

  computed: {
    isChanged() {
      if (this.item_loaded.department == this.item.department) {
        return false
      } else {
        return true
      }
    }
  },
}
</script>


Спасибо!
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
При изменении item.department меняется и item_loaded.department

this.item_loaded = this.item

Реактивность, как же. Проблема в том, что вы язык не знаете, а лезете фреймворками пользоваться.

this.item_loaded = { ...this.item }

Погуглите, в чём разница между примитивными типами данных и объектами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы