Блог

Главная - Вопросы по программированию - VueJS — дочерний компонент, не обновляемый с помощью prop, установленного из родительского вычисляемого свойства

VueJS — дочерний компонент, не обновляемый с помощью prop, установленного из родительского вычисляемого свойства

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

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

Родитель

   computed: {
    isSaving() {
      return (
  this.$_.values(this.$store.getters["CommonSettings/saving"]).filter(
          status => status amp;amp; status != "done"
        ).length > 0
      );
    }


 <SaveButton v-bind:saveState="isSaving"/>

Дочерний компонент

 <script>    
export default {
  name: "saveButton",
  props: ['saveState']
}
</script>
<template>
  <div class="settings--button-wrapper">
    <button class="btn btn--small" type="button" @click="submit()" v-if="!saveState">
      <svg v-if="!saveState">
        <use xlink:href="/img/sprite.svg#transparent-tick" />
      </svg>
      <span v-if="!saveState">Save changes</span>
    </button>
    <spinner v-if="saveState" class="settings--spinner">
      <span>Saving...</span>
    </spinner>
  </div>
</template>

Когда я помещаю свой шаблон компонента SaveButton непосредственно в родительский, он работает отлично. Когда я извлекаю его в его собственный компонент, как описано выше, он застревает на «Сохранение …» и не меняется.

Когда я пытаюсь выполнить приведенное ниже в родительском:-

 <template>
<div>
  <div class="settings--button-wrapper">
    <button class="btn btn--small" type="button" @click="submit()" v-if="!saveState">
      <svg v-if="!saveState">
        <use xlink:href="/img/sprite.svg#transparent-tick" />
      </svg>
      <span v-if="!saveState">Save changes</span>
    </button>
    <spinner v-if="saveState" class="settings--spinner">
      <span>Saving...</span>
    </spinner>
  </div>
     <SaveButton v-bind:saveState="isSaving"/>
</div>
</template>

..компонент кнопки также влияет на исходный код кнопки над ним — так что оба они сломаны. Когда я удаляю компонент SaveButton, исходный код снова работает.

Когда я проверяю вышеизложенное в моем инспекторе Vue, isSaving переменная застревает на true. Я думаю, что это, возможно, исходное значение при запуске, но я не уверен, как оно так застревает. Каким-то образом мой дочерний компонент, похоже, влияет на значение родительского вычисляемого свойства isSaving, поскольку оно застревает при true загрузке страницы.

Комментарии:

1. в последнем фрагменте кода <template> может иметь только 1 прямого дочернего элемента, поэтому, мягко говоря, поместите свою кнопку сохранения внутри div.

2. @curveball — это была ошибка копирования / вставки — извините. Исправил это сейчас — это не причина моей проблемы.

3. Я думаю, нам нужен воспроизводимый пример. Возможно, отсутствуют импортные данные и т. Д. Не могли бы вы извлечь рассматриваемый код и сделать его примером песочницы? PS. Где он всегда застревает на true? Может быть, данные, отфильтрованные в isSaving, действительно всегда верны?

4. Просто чтобы уточнить, значение isSaving обновляется в вашем родительском компоненте, просто не передается вашему дочернему компоненту?

5. @Hannah — я переделываю вещи в их собственные компоненты. Когда я пытаюсь поместить эту кнопку в свой собственный компонент — он больше не получает обновления от родительского компонента — он застревает на начальном значении. Когда я проверяю компоненты в своем браузере при загрузке — родительскому «isSaving» присваивается значение true, а дочернему также присваивается значение true. Когда я удаляю компонент и возвращаюсь к исходному коду, «isSaving» немедленно обновляется до false, как и должно быть. Итак, мой компонент каким-то образом влияет на значение вычисляемого свойства в родительском.