Question

我正在使用Nuxt，Nuxt Typescript，TSX和Vue Composition API。当我将一个.vue组件转换为一个.tsx组件时，不使用，但是从设置函数返回JSX时，在运行时出现以下错误：< / p>

无法读取未定义的属性'$ createElement'

从上面列出的堆栈中，我不知道哪个部分可能导致此问题，因此我假设它与Composition API程序包有关。我也不太熟悉Composition API，并且尝试学习-可能是我在这里做错了吗？

我的组件看起来像这样：

import { createComponent, reactive } from '@vue/composition-api'
import InputField from '@/components/InputField.vue'
import PageSection from '@/components/PageSection.vue'
import countryData from '@/data/countries.json'

export default createComponent({
  components: {
    InputField,
    PageSection
  },

  setup() {
    const state = reactive({
      destination: null,
      whenDate: {
        start: null,
        span: null
      },
      travelType: null,
      countries: { ...countryData }
    })

    return () => (
      <PageSection classes="md:pt-40 pt-8 bg-gray-100" heading="Where do you wanna go today?">
        <svg slot="top" class="absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#ebeff2"
            fill-opacity="1"
            d="M0,96L80,101.3C160,107,320,117,480,112C640,107,800,85,960,90.7C1120,96,1280,128,1360,144L1440,160L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
          ></path>
        </svg>

        <form class="flex justify-center mt-4 md:mt-12 -mx-1 text-center flex-wrap">
          <InputField
            v-model={state.destination}
            type="select"
            placeholder="Where are you going?"
            width="3/12"
            options={state.countries}
            required={true}
          />
          <InputField
            v-model={state.whenDate}
            type="date"
            placeholder="When are you travelling?"
            width="3/12"
            required={true}
          />
          <InputField
            v-model={state.travelType}
            placeholder="Tell us what you're doing there"
            width="3/12"
            required={true}
          />
          <div class="px-1 w-full md:w-2/12 mt-3 md:mt-0">
            <button class="btn btn-primary bg-primary w-full h-full">Search</button>
          </div>
        </form>
      </PageSection>
    )
  }
})

环境信息：

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE     
    Yarn: 1.19.1 - ~\AppData\Local\Yarn\bin\yarn.CMD     
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: 44.19008.1.0
  npmPackages:
    @fortawesome/vue-fontawesome:  0.1.7 
    @nuxt/vue-app:  2.10.1 
    @nuxt/vue-renderer:  2.10.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0        
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-jsx:  1.1.1 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.1.1
    @vue/babel-sugar-v-on:  1.1.0
    @vue/component-compiler-utils:  3.0.0
    @vue/composition-api: ^0.3.2 => 0.3.2
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0
    eslint-plugin-vue: ^5.2.2 => 5.2.3
    typescript:  3.6.4
    vue:  2.6.10
    vue-carousel: ^0.18.0 => 0.18.0
    vue-cli-webpack:  1.0.0
    vue-client-only:  2.0.0
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.1
    vue-meta:  2.3.1
    vue-no-ssr:  1.1.1
    vue-router:  3.0.7
    vue-server-renderer:  2.6.10
    vue-spinner: ^1.0.3 => 1.0.3
    vue-style-loader:  4.1.2
    vue-template-compiler:  2.6.10
    vue-template-es2015-compiler:  1.9.1
    vuex:  3.1.1
  npmGlobalPackages:
    @vue/cli: Not Found

Answer 1

您无法从设置功能返回模板。您可以返回反应状态，计算值，引用，方法等。

以下是使用新的composition api的示例组件：

<template>
  <div>
    <div>Count: {{count}} </div>
    <div>User: {{user.name}}, {{ user.age }} years old. </div>
  </div>
</template>

<script>
import { ref, createComponent, reactive } from "@vue/composition-api";

export default createComponent({
  setup() {
    const count = ref(5);
    const user = reactive({
      name: "Mesut",
      age: 25
    });
    //state
    return {
      count,
      user
    };
  }
});
</script>

<style>
</style>

Vue Composition API：无法读取未定义的属性“ $ createElement”

1 个答案: