计算属性未在道具更改时更新

Posted 2023-02-23

【中文标题】计算属性未在道具更改时更新

【英文标题】：Computed property not updating on props changes

【发布时间】：2019-06-03 01:04:37

【问题描述】：

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

this.favourite 是通过 props 传递的，但是当 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;

【问题讨论】：

selectedChoices 是一个数组。您可能正在以 Vue 无法跟踪的方式修改其值：请参阅 vuejs.org/2016/02/06/common-gotchas/… 和 vuejs.org/v2/guide/list.html#Array-Change-Detection

【参考方案1】：

测试

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

【讨论】：

createLocalVue() 的调用在哪里？

【参考方案2】：

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

【讨论】：

你是怎么做到的，我也遇到了同样的问题

@Keith 确保在安装组件之前通过 props 或通过组件中的 data 函数声明您要监视更改的所有数据。基本上 Vue.js 无法检测到组件安装在计算属性中后声明的数据的更改。