programing

Vuex – 상태에서 "this" 키워드를 사용하여 하위 컴포넌트의 메서드에 액세스합니다.

goodsources 2022. 9. 14. 22:30
반응형

Vuex – 상태에서 "this" 키워드를 사용하여 하위 컴포넌트의 메서드에 액세스합니다.

Vue(+Vuetify) 및 Vuex를 사용하고 있습니다.store > state에는 네스트된 오브젝트가 있습니다.하위 컴포넌트에서 매핑하는 것은 예상대로 동작하지만 오브젝트 내에서는 에서 메서드에 액세스하려고 합니다.child component타고this.row그리고.this.hidden그 결과,

Uncaughed TypeError: 정의되지 않은 속성 '행'을 읽을 수 없습니다.

아래는 스토어와 자 컴포넌트의 코드입니다.

// store.js

const state = {
    myValue: {
        radioRequesttype: "New Registration",
        numberInfo: [{ sNumber: '' }]
    },
    mySchema: {
        radioRequesttype: {
            type: "radio",
            row: this.row,
            options: ["New Registration", "Re-registration"]
        },
        sNumberInfo: {
            hidden: this.hidden,
            type: "array",
            flex: 12,

            schema: {
                sNumber: {
                    type: "text",
                    label: "ID",
                    hint: "by re-registration only",
                    flex: 12
                }
            }
        }
    }
};
// childcomponent.vue

  computed: {
    ...mapGetters ([
        'myValue',
        'mySchema'
    ]),
    row() {
      return this.$vuetify.breakpoint.mdAndUp;
    }
  },
  methods: {
    update(val) {
      update(val);

      let { key, value } = val;

      if (key === "radioRequesttype")
        this.mySchema.sNumberInfo.hidden = value !== "Re-registration";
    },
      ...mapActions ([
          'updateMyValue'
      ])
  }

언급URL : https://stackoverflow.com/questions/60408673/vuex-use-this-keyword-in-state-to-access-method-in-child-component

반응형