Question

当传递的prop对象中的嵌套属性发生更改时，我无法更新计算所得的属性。

this.favourite 通过道具传递，但是当 this.favourite.selectedChoices.second.id 和 this.favourite时，计算的属性不会更新。 selectedChoices.first.id 已更改。

关于如何使这种反应性的任何想法？

这是计算出的属性：

javax.net.debug=all

Answer 1

计算属性未更新的原因是因为我创建了 this.favourite.selectedChoices.second 和 this.favourite.selectedChoices.first 的id对象strong>，在渲染组件之后。解决方案是在渲染之前声明id对象。

Answer 2

已测试

在我的 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/

计算属性不会在道具更改时更新

2 个答案: