草庐IT

记一次 Element-UI 嵌套组件不生效的问题

Hemist 2023-04-03 原文

我在使用 Element-ui 的 el-popconfirm 气泡确认框插件时，使用了以下的代码：

<el-popconfirm
  style="margin-right:10px;"
  confirm-button-text='确认'
  cancel-button-text='取消'
  icon="el-icon-info"
  icon-color="red"
  title="该操作仅能执行一次且不可逆，建议冻结团队后操作。确认执行吗？"
  @confirm="handleAddGitGroupMembers()"
>
  <el-button v-if="gitGroup().groupId!=null" slot="reference" size="small">
    添加项目组成员
  </el-button>
</el-popconfirm>

这是一段真实的代码，我想通过 gitGroup().groupId 是否绑定来控制 button 的存亡，但却错把 v-if 放在了子组件中。我们从一个正常人的视角来看，大概都会知道，按理来说 v-if 应该放在嵌套在外层父组件 popconfirm 中，否则会导致一些问题。

这种问题表现出来就非常的玄学：当我更改代码后编译运行打开这个页面时，一切都很正常，点击 button 也能够正常显示气泡确认框。但运行一段时间后，再去点击 button，则很有可能无法显示气泡确认框了。

具体是什么原因呢？我们还是得从 Vue 组件的生命周期说起。

我们都知道，在生命周期中，挂载阶段会将源 html 代码生成真实的 DOM 节点，而后随着数据的更新，相应的组件也会重新编译渲染并再次挂载，因此实际上，挂载阶段是整个文件第一次且完整的编译挂载。问题就出在这，由于 v-if 的渲染是惰性的，因此，若 v-if 的初始值为false，那么在页面的挂载阶段，v-if 所修饰的组件不会被渲染执行。而与此同时，父组件 popconfirm 已经渲染完毕了，但它表示很困惑，因为根本找不到自己服务的 button。后来发生了某些数据更新，v-if 的值变为 true，子组件重新得以渲染挂载了，但此时已经为时已晚。子组件比父组件仅仅晚到了一步，从表面上看来，具象的 DOM 结构是没有任何异常的，但实际上，父组件 popconfirm 早已经丢失了子组件的指针，因此绑定失败了。

<!-- 好的代码 -->
<el-popconfirm
  v-if="gitGroup().groupId!=null"
  style="margin-right:10px;"
  confirm-button-text='确认'
  cancel-button-text='取消'
  icon="el-icon-info"
  icon-color="red"
  title="该操作仅能执行一次且不可逆，建议冻结团队后操作。确认执行吗？"
  @confirm="handleAddGitGroupMembers()"
>
  <el-button slot="reference" size="small">
    添加工蜂项目组成员
   </el-button>
</el-popconfirm>

其实如果非要放在里面的话，使用 v-show 吧！这种非惰性的显隐控制，无论什么情况，子组件都会在挂载阶段渲染挂载，这样也就不会出现丢了儿子的情况了。

<!-- 使用 v-show 的代码 -->
<el-popconfirm
  style="margin-right:10px;"
  confirm-button-text='确认'
  cancel-button-text='取消'
  icon="el-icon-info"
  icon-color="red"
  title="该操作仅能执行一次且不可逆，建议冻结团队后操作。确认执行吗？"
  @confirm="handleAddGitGroupMembers()"
>
  <el-button v-show="gitGroup().groupId!=null" slot="reference" size="small">
    添加项目组成员
  </el-button>
</el-popconfirm>
Element-UIElementspanclasstokenvue.js$javascript$elementui$前端

有关记一次 Element-UI 嵌套组件不生效的问题的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  4. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  5. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  6. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  7. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  8. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  9. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  10. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

随机推荐