선택 입력 /w Vuex 저장소 바인딩에 의한 동적 구성 요소

선택 입력 /w Vuex 저장소 바인딩에 의한 동적 구성 요소

나는 Vuex 스토어에 양방향 바인딩이 있는 선택 상자 옵션을 기반으로 동적 구성 요소를 변경하는 방법을 모른다.내 단일 파일 구성 요소(Fieldvalue)에는 이 동적 구성 요소와 선택 상자가 들어 있다.형식 값은 Vuex Store에서 가져오며, 여기서 fieldId에 의해 찾을 수 있으며, 상위 구성 요소를 통해 전달된다.그래서 41과 같은 ID를 가진 필드에는 필드값 구성요소가 있다.fieldtypeComponent의 get() 함수는 소품에서 전달된 fieldId 값(부모가 전달함)을 알고 스토어의 fieldvalues 배열에서 검색하기 위한 ID를 가져야 한다.
하지만 내가 어떻게 하는지는 효과가 없어. (합성된 아웃라인)
좋은 생각 있어?

내 Vuex 스토어 getter:

export function getFieldvalueTypeByFieldnameId(state){
    return (fieldId) => {
        const fieldvalue = state.form.fieldvalues.find(e => e.fieldId == fieldId);
        return fieldvalue.type;
    }
}

돌연변이:

export function setFieldvalueType(state, obj){
  const { type, fieldId } = obj;
  const fieldvalue = state.form.fieldvalues.find( e => e.fieldId === fieldId );
  fieldvalue.type = type;
}

내 Vuex 저장소 상태 예:

{
  "form": {
    "name": "",
    "fieldvalues": [
      {
        "formularId": null,
        "fieldId": 41,
        "value": {},
        "type": ""
      },
      {
        "formularId": null,
        "fieldId": 44,
        "value": {},
        "type": ""
      }
    ]
  }
}

내 단일 파일 구성 요소:

<template>
  <div class="row">
    <div class="col-3 self-center">
      <q-select
        square
        filled
        v-model="fieldtypeComponent"
        :options="fieldtypes"
        option-value="component"
        map-options
        emit-value
        label="Type"
      />
    </div>
    <div class="col">
      <template
        v-if="fieldtypeComponent === null || fieldtypeComponent == undefined">
        <p>no type selected</p>
      </template>
      <component v-else :is="fieldtypeComponent"></component>
    </div>
  </div>
</template>

<script>
import IconField from "components/fieldtypes/IconField";
import TextField from "components/fieldtypes/TextField";

export default {
  name: "Fieldvalue",
  data() {
    return {
      selected: "",
      fieldtypes: [
        { label: "Icon", component: "IconField" },
        { label: "Text", component: "TextField" }
      ]
    };
  },
  components: {
    IconField,
    TextField
  },
  computed: {
    fieldtype: function() {
      return this.$store.getters["formular/getFieldvalueTypeByFieldnameId"];
    },
    fieldtypeComponent: {
      get() {
        //return this.fieldtyp(this.fieldnameId);
        //return this.$store.getters["formular/getFieldvalueType"];
        return null;
      },
      set(type) {
        const payload = {
          type,
          fieldId: this.forFieldnameId
        };
        this.$store.commit("formular/setFieldvalueType", payload);
      }
    }
  },
  props: {
    forFieldnameId: { type: Number, required: true }
  },
  methods: {
    changeComponent() {
      this.fieldtypeComponent = this.selected;
      const payload = {
        type: this.selected,
        fieldId: this.forFieldnameId
      };
      this.$store.commit("tarife/setFieldvalueTyp", payload);
    }
  }
};
</script>

수행할 작업에 대한 추가 정보:
나는 이름이 있는 형식에 정의된 몇 개의 필드를 가지고 있다.해당 양식의 각 필드 이름에 대해 나중에 값을 저장하고자 한다.
그러나 그 값(Javascript 객체/J)SON)은 선택 입력에서 Chooseen 구성 요소에 따라 다르다. (TextField 또는 IconField)
내 전승 방식이 옳은지, 너무 복잡한지 모르겠다.특히 양방향 바인딩 또는 상위 구성 요소까지 방출하고 완전한 논리를 처리하도록 하는 것에 대해.
선택한 구성 요소의 값을 Vuex 스토어 필드값 항목에도 바인딩해야 한다.

어쩌면 내 접근법이 틀려서 완전히 다르게 해야 할까?

참조URL: https://stackoverflow.com/questions/64405429/dynamic-component-by-select-input-w-vuex-store-binding