Как использовать свойство объекта в качестве значения для props (теряется реактивность)?

Question

[Олег Трубин]

Здравствуйте.
Имеются 2 компонента: список и элемент списка.

См. код ниже.
Проблема в следующем:
В качестве значения одного из входных параметров (isEdit), я пытаюсь использовать значение свойства объекта (editState)
Но когда я меняю значение свойства, значение соответствущего props не меняется.
Т.е. реактивность в этом случает не работает?
Как бы реалировать задуманное?

Список:

<template>
  <div class="edit-tag-list">
    <h3>Список тегов</h3>
    <EditTagItem
      v-for="(tagName, key) in tagsAsArray" :key="key"
      :name="tagName"
      :isEdit="editState[tagName]"
      @startEditingTagName="startEditingTagName"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import EditTagItem from './EditTagItem.vue';

export default {
  name: 'EditTagList',
  components: { EditTagItem },
  data: () => ({
    editState: {},
  }),
  computed: {
    ...mapGetters('tags', ['tagsAsArray']),
  },
  methods: {
    startEditingTagName(tagName) {
		this.editState[tagName] = true;
    },
  },
  created() {
    this.tagsAsArray.forEach((item) => {
      this.editState[item] = false;
    });
  },
};
</script>

Элемент списка (лишнее убрано):

<template>
  <div class="edit-tag-item d-flex clearfix">
    <template v-if="isEdit">
        <input class="mr-auto"/>
        <b-icon class="edit-tag-icon edit-tag-icon-edit" icon="check2-square" variant="success"b-icon>
    </template>
    <template v-else>
        <span class="edit-tag-name mr-auto">{{ name }}</span>
        <b-icon class="edit-tag-icon edit-tag-icon-edit" icon="pencil-square" variant="primary" @onClick="editTagName"></b-icon>
    </template>
  </div>
</template>

<script>
export default {
  name: 'EditTagItem',
  components: {
    clickableWrapper,
  },
  props: {
    name: String,
    isEdit: Boolean,
  },
  methods: {
    editTagName() {
      this.$emit('startEditingTagName', this.name);
    },
  },
};
</script>

Answer 1

[0xD34F]

created() {
  this.tagsAsArray.forEach((item) => {
    this.editState[item] = false;
  });
},

Нет, так свойства editState реактивными не будут:

Vue cannot detect property addition or deletion.

Создавайте новый объект вместо модификации существующего:

created() {
  this.editState = Object.fromEntries(this.tagsAsArray.map(n => [ n, false ]));
},

Ещё дико подозрительная вещь - подключение обработчика клика в компоненте элемента списка:

@onClick="editTagName"

Затрудняюсь припомнить, видел ли такое хоть раз, чтобы имя события vue-компонента было с приставкой "on". Может, должно быть просто "click"? Проверьте на всякий случай.

Comments

[Сергей delphinpro]

Затрудняюсь припомнить, видел ли такое хоть раз, чтобы имя события vue-компонента было с приставкой "on". Может, должно быть просто "click"? Проверьте на всякий случай.

v-on:click=
или
@click=

[Олег Трубин]

Спасибо! Действительно если создавать объект заново, реактивность работает. Я читал документацию, но вот не дошло до меня, поскольку там речь шла о добавлении новых свойств.

Ещё дико подозрительная вещь - подключение обработчика клика в компоненте элемента списка:

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

[Олег Трубин]

У меня в vuex в state имеется объект со свойствами, некоторые из которых тоже объекты. Насколько я понимаю, в vuex, тоже, чтобы была реактивность, при изменении свойства, я должен склонировать объект и присвоить его свойству в state, как новый объект. Другого пути нет?

[0xD34F]

Олег Трубин, выше, в ответе, есть ссылка. Я её не просто так разместил - вы всё-таки по ней перейдите и прочтите, что там написано. Если сделаете это, вопрос про "другой путь" должен проясниться.