Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

动态组件component在v-for循环中可能出现问题 #11484

Open
vform666 opened this issue Mar 20, 2022 · 1 comment
Open

动态组件component在v-for循环中可能出现问题 #11484

vform666 opened this issue Mar 20, 2022 · 1 comment
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@vform666
Copy link

vform666 commented Mar 20, 2022

相关平台

微信小程序

小程序基础库: 2.14.4
使用框架: Vue 3

复现步骤

<template>
  <view class="index">
    <view>
      <img src="" alt="">
    </view>
    {{ msg }}
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
      <component :is="testButton">aaaa</component>

      <template v-for="comp in customComponents">
        <component :is="comp.type">aaaa</component>
      </template>
    </view>
    <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
  </view>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
export default {
  name: 'Index',
  components: {
    
  },
  setup(){
    const state = reactive({
      msg: '欢迎使用 NutUI3.0 开发小程序',
      msg2: '你成功了~',
      type: 'text',
      show: false,
      cover: false
    });

    const testButton = ref('nut-button')

    let customComponents = reactive([
      {type: 'nut-buttton', label: '按钮1'},
      {type: 'nut-buttton', label: '按钮2'},
    ])

    const handleClick = (type, msg, cover = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };

    return {
      ...toRefs(state),
      testButton,
      customComponents,
      handleClick
    }
  }
}
</script>

期望结果

动态组件能正常渲染

实际结果

报错:

 Template `tmpl_0_nut-buttton` not found.
  347 | 
  348 | <template name="tmpl_2_container">
> 349 |   <template is="{{xs.a(2, i.nn, l)}}" data="{{i:i,cid:2,l:xs.f(l,i.nn)}}" />
      |                ^
  350 | </template>
  351 | 
  352 | <template name="tmpl_3_catch-view">

环境信息

 Taro v3.4.3


  Taro CLI 3.4.3 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.13.0 - C:\Program Files\nodejs\node.EXE        
      Yarn: 1.22.17 - C:\Users\jc\AppData\Roaming\npm\yarn.CMD
      npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
@taro-bot2 taro-bot2 bot added F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x labels Mar 20, 2022
@github-actions
Copy link
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
None yet
Development

No branches or pull requests

1 participant