1

у меня есть компонент switcher от которого я должен получить значение и я пытаюсь записать это значение

this.isActive = value 

но в консоли у меня ошибка:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isActive"

listItem.vue

<template>
  <div class="walletitem" :class="isActive === '1' ? 'disabled' : ''">
    <div class="walletitem__actions">
      <div class="walletitem__switcher-wrapper">
        <BaseSwitcher v-model="isActive" label="Disabled" @change="statusHandler" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WalletsListItem',

  props: {
    isActive: {
      type: Boolean,
      required: true,
      default: true,
    },
  },

  methods: {
    statusHandler(value) {
      this.isActive = value;
    },
  },
};
</script>

BaseSwitcher.vue

<template>
  <div class="switcher__wrapper">
    <label class="switcher__label">{{label}}</label>
    <div class="switcher">
      <input type="checkbox" :value="value" @change="changeHandler" />
      <div class="switcher__toggle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseSwitcher',

  props: {
    label: {
      type: String,
      required: false,
      default: '',
    },

    value: {
      type: Boolean,
      required: false,
      default: '',
    },
  },

  methods: {
    changeHandler({ target: { checked } }) {
      this.$emit('change', checked);
    },
  },
};
</script>
2
  • 1
    Перенеси из props в data свой isActive
    – eri
    2 авг 2019 в 8:04
  • 1
    Избегайте прямого изменения свойства (props), так как значение будет перезаписываться при каждом повторном рендеринге родительского компонента. Вместо этого используйте данные (data) или вычисляемое свойство, основанное на значении свойства (props).
    – user256824
    2 авг 2019 в 8:39

1 ответ 1

1

Vue: Однонаправленный поток данных

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

Кроме того, каждый раз, когда обновляется родительский компонент, все входные параметры дочернего компонента будут обновлены актуальными значениями. Это означает, что вы не должны пытаться изменять входной параметр внутри дочернего компонента. Если вы это сделаете, Vue отобразит предупреждение в консоли.

Обычно встречаются два случая, когда возникает соблазн изменять входной параметр:

Входной параметр используется для передачи начального значения; дочерний компонент хочет использовать его как локальное свойство данных в дальнейшем. В этом случае лучше всего определить локальное свойство в данных, которое использует значение входного параметра в качестве начального:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

Входной параметр передаётся как необработанное значение, которое необходимо преобразовать. В этом случае лучше всего определить вычисляемое свойство с использованием входного параметра:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Обратите внимание, что объекты и массивы в JavaScript передаются по ссылке, поэтому если входной параметр является массивом или объектом, то изменение объекта или массива внутри дочернего компонента будет влиять на состояние родителя.

Информация взята из официальной документации vue - Однонаправленный поток данных

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.