ロジック部分を共有する複数のコンポーネント (textField、radioField、numberField など) があります。次に例を示します。
//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
}
}
});
現在、以下のような基本コンポーネントのみを必要とする各コンポーネントのスクリプトタグで src を使用していますが、機能します(ただし、新しいオブジェクトではなくオブジェクトを共有しているように見えるため、選択したオプションがテキストフィールドのようになり、望んでいません):
//numberField.vue
<script lang="ts" src="../scripts/inputFieldScriptTag.ts">
</script>
また、baseInputField.ts よりもいくつかのコード (ここでは、以下のコードでわかるように" colorStateCheck " のみ) を持つ radioField.vue のようなものについては、適切に拡張して使用することができませんでした。
//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
}
}
});
これを行う適切な方法はありますか?
.....
(このパスをオプションAPIからコンポジションAPIに移動して問題を解決したい場合は、Vuejs TypescriptオプションをコンポジションAPIに変換するのこの質問の奇妙な問題に従うことができます。これは、この質問のこのステップに進みました)