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

[Tabs 选项卡] TabPanel使用Slot插槽时,控制台有Vue warn警告 #721

Open
201620172018 opened this issue May 31, 2024 · 4 comments
Assignees
Labels
Accepted This issue is accepted 🐞 BUG Something isn't working 🏃🏻 in progress in progress

Comments

@201620172018
Copy link

201620172018 commented May 31, 2024

tdesign-vue-next-starter 版本

1.9.5

重现链接

No response

重现步骤

<template>
  <t-tabs :default-value="1">
    <t-tab-panel :value="1">
      <template #label>
        <span style="margin-right: 10px;">选项卡一</span>
        <span>({{ count }})</span>
      </template>
      <p style="margin: 20px;">选项卡一内容区</p>
    </t-tab-panel>
    <t-tab-panel :value="2" label="选项卡二">
      <p style="margin: 20px">选项卡二内容区</p>
    </t-tab-panel>
    <t-tab-panel :value="3" label="选项卡三">
      <p style="margin: 20px">选项卡三内容区</p>
    </t-tab-panel>
  </t-tabs>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'

const count = ref(0)

onMounted(() => {
  nextTick(() => {
    count.value = 999
  })
})
</script>

期望结果

控制台没有 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

实际结果

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <TTabNav theme="normal" value=1 size="medium"  ... > 
  at <TTabs default-value=1 > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <KeepAlive include= (3) ['DashboardDetail', 'accountManage', 'billManage'] > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView key=0 > 
  at <Content> 
  at <TContent class="tdesign-starter-content-layout" > 
  at <TLayout class="tdesign-starter-layout" id="main-scroll-container" > 
  at <LayoutContent id="main-scroll-container" > 
  at <TContent> 
  at <TLayout> 
  at <TLayout key="side" class="t-layout--with-sider" > 
  at <Index class="light" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView key="zh_CN" class="light" > 
  at <TConfigProvider global-config= {pagination: {}, cascader: {}, calendar: {}, transfer: {}, timePicker: {}, …} > 
  at <App>

框架版本

Vue(3.4.27)

浏览器版本

No response

系统版本

No response

Node版本

21.1.0

补充说明

No response

Copy link
Contributor

👋 @201620172018,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

Copy link
Contributor

github-actions bot commented May 31, 2024

♥️ 有劳 @timi137137 @liweijie0812 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @201620172018

@hedanto
Copy link

hedanto commented Jun 12, 2024

遇到同样的问题请问解决了吗?

1 similar comment
@hedanto
Copy link

hedanto commented Jun 25, 2024

遇到同样的问题请问解决了吗?

@timi137137 timi137137 added 🐞 BUG Something isn't working 🏃🏻 in progress in progress Accepted This issue is accepted labels Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accepted This issue is accepted 🐞 BUG Something isn't working 🏃🏻 in progress in progress
Projects
None yet
Development

No branches or pull requests

4 participants