Вычисляемое свойство не обновляется при изменении реквизита

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

this.favourite передается через свойства, но вычисленное свойство не обновляется, когда this.favourite.selectedChoices.second.id и this.favourite.selectedChoices.first .id изменен.

Есть идеи, как сделать это реактивным?

Вот вычисленное свойство:

isDisabled() {
  const hasMultipleChoices = this.favourite.choices.length
    ? this.favourite.choices[0].value.some(value => value.choices.length) : 
    false;

  if (hasMultipleChoices && !this.favourite.selectedChoices.second.id) {
    return true;
  } else if (this.favourite.choices.length && !this.favourite.selectedChoices.first.id) {
    return true;
  }

  return false;
}

vue.js computed-properties vuejs2 vue-reactivity
person Kris D. J.    schedule 08.01.2019    source источник
comment
selectedChoices - это массив. Вероятно, вы изменяете его значения так, как Vue не может отслеживать: см. vuejs.org/2016/02/06/common-gotchas/ и vuejs.org/v2/guide/list.html#Array-Change-Detection   -  person Sergeon    schedule 08.01.2019

Ответы (2)


arrow_upward
1
arrow_downward

Причина, по которой вычисляемое свойство не обновлялось, заключалась в том, что я создал объект id для this.favourite.selectedChoices.second и this.favourite.selectedChoices.first, после рендеринга компонента. Решением было объявление объектов id перед рендерингом.

person Kris D. J.    schedule 08.01.2019
comment
Как вы это сделали, у меня такая же проблема - person Keith; 08.01.2019
comment
@Keith Убедитесь, что все данные, за изменениями которых вы хотите следить, объявляются через props перед монтированием компонента или через функцию данных в компоненте. В основном Vue.js не может обнаруживать изменения данных, объявленных после того, как компонент смонтирован в вычисляемом свойстве. - person Kris D. J.; 10.01.2019

arrow_upward
0
arrow_downward

ПРОВЕРЕНО

В моем test.vue

props: {
    variant: {
      type: String,
      default: ''
    }
}

const myComputedName = computed(() => {
  return {
    'yellow--warning': props.variant === 'yellow',
    'red--warning': props.variant === 'red',
  }
})

test.spec.js

    import { shallowMount } from '@vue/test-utils'
    import test from '@/components/test.vue'
    let wrapper
    
    //default values
    function createConfig(overrides) {
      let variant = ''
      const propsData = { variant }
      return Object.assign({ propsData }, overrides)
    }
    //test
    describe('test.vue Implementation Test', () => {
      let wrapper
    
      // TEARDOWN - run after to each unit test
      afterEach(() => {
        wrapper.destroy()
      })
      it('computed return red if prop variant is red', async (done) => {
        const config = createConfig({ propsData: { variant: 'red' } })
        wrapper = shallowMount(test, config)
        wrapper.vm.$nextTick(() => {
        //checking that my computed has changed, in my case I want to matchanObject
          expect(wrapper.vm.myComputedName).toMatchObject({
            'red--warning': true
          })
          //check what your computed value looks like
          console.log(wrapper.vm.myComputedName)
          done()
        })
      })

//TEST 2 Variant, this time instead red, lets say yellow

      it('computed return yellow if prop variant is red', async (done) => {
        const config = createConfig({ propsData: { variant: 'yellow' } })
        wrapper = shallowMount(test, config)
        wrapper.vm.$nextTick(() => {
        //checking that my computed has changed, in my case I want to matchanObject
          expect(wrapper.vm.myComputedName).toMatchObject({
            'yellow--warning': true
          })
          //check what your computed value looks like
          console.log(wrapper.vm.myComputedName)
          done()
        })
      })
    })

для получения дополнительной информации эта страница мне помогла.

https://vuejsdevelopers.com/2019/08/26/vue-what-to-unit-test-components/

person Jelly    schedule 03.02.2021