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

Здравствуйте.
Имеются 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>
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
created() {
  this.tagsAsArray.forEach((item) => {
    this.editState[item] = false;
  });
},

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

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

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


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

@onClick="editTagName"

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

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

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