1

I have multiple components(textField, radioField,numberField ,...) which share the logic part, for example:

//baseInputField.ts
import {createComponent} from "@vue/composition-api";
import {
  useInputFieldComposition,
  inputFieldProps
} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";

export default createComponent({
  props: inputFieldProps as ComponentPropsOptions,
  setup(props, context) {
    const {inputField, updateValue} = useInputFieldComposition(props, context);
    return {
      inputField, updateValue
    }
  }
});

currently i use src in script tag for each components which only needs the base compoenent like below, and it works(but seems like sharing an object not a new one, that makes my select Options to be like a textField, which i dont want it):

//numberField.vue
<script lang="ts" src="../scripts/inputFieldScriptTag.ts">
</script>

and for those like radioField.vue which has some more code(here just a "colorStateCheck" as you can see in the below code) than baseInputField.ts, i couldnt extend it properly and use it. 

//radioField.vue
  import {createComponent} from "@vue/composition-api";
  import {
    useInputFieldComposition,
    inputFieldProps
  } from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
  import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";
  import {FormGeneratorInputFieldsLabelValuePairs} from "@/types";

  export default createComponent({
    name: "RadioField",
    props: inputFieldProps as ComponentPropsOptions,
    setup(props, context) {
      const {inputField, updateValue} = useInputFieldComposition(props, context);
      const colorStateCheck = (item: FormGeneratorInputFieldsLabelValuePairs) => {
        if (inputField.inputValue === item.value) {
          if (item.value === false) {
            return 'color:red';
          } else {
            return 'color:#84CE95';
          }
        }
        return ''
      };
      return {
        inputField, updateValue, colorStateCheck
      }

    }
  });

is there any proper way to do this?

.....

(if you want to go this path from option api to composition api and fix you problems , you can follow this ask odd problems in Convert Vuejs Typescript Options to Composition Api ,which i made it to this step here in this ask)

SeyyedKhandon
  • 5,197
  • 8
  • 37
  • 68
  • _"i couldnt extend it properly"_ … what is not properly extended? – Paleo Feb 01 '20 at 11:56
  • 1
    Maybe [the documentation (section "Logic Extraction and Reuse")](https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse) can help. – Paleo Feb 01 '20 at 11:59
  • thank you @Paleo , I did read the article, but it is a little bit diffrent from what it is being said in the doc. if you want to do the same thing which i told in the question, how would you do that? – SeyyedKhandon Feb 01 '20 at 17:14

0 Answers0