如何将使用 vue 静态数据显示为模态？答案

【问题标题】：How to show using vue static data into modal?如何将使用 vue 静态数据显示为模态？
【发布时间】：2020-09-24 22:27:39
【问题描述】：

我有这两张包含此内容的“卡片”

<div class='card'>
<span>title one </span>
<button @click='open = !open'>show</button>
</div>

<div class='card'>
<span>title two </span>
<button @click='open = !open'>show</button>
</div>

我在同一个组件中显示此模式的位置。我需要在其中显示的是，如果我单击第一个按钮，则显示标题一个，如果单击按钮 2，则显示标题 2，依此类推...

完成这项任务的最佳方法是什么？（以模态显示卡片内容）

【问题讨论】：

标签： vue.js

【解决方案1】：

首先有两件事：

ooen 可能是错字，您的意思是 open？
=! 看起来像单个运算符，但在这种情况下它实际上意味着 open = !open。在= 和! 之间留一个空格，以明确其含义。

如果您想独立控制两个部分的可见性，则需要两个单独的数据属性（open1 和 open2）。使用v-if 或v-show 控制可见性。

new Vue({
  el: '#app',
  data: {
    open1: false,
    open2: false,
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="card">
    <span v-if="open1">title 1</span>
    <button @click="open1 = !open1">toggle</button>
  </div>
  <div class="card">
    <span v-if="open2">title 2</span>
    <button @click="open2 = !open2">toggle</button>
  </div>
</div>

如果您有很多这些，那么将功能包装到一个单独的组件中，这样您就不必定义open1、open2、...等等。

Vue.component('card', {
  template: `
<div class="card">
  <span v-if="open"><slot/></span>
  <button @click="open = !open">toggle</button>
</div>`,
  data() {
    return {
      open: false
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <card>title 1</card>
  <card>title 2</card>
</div>

【讨论】：

你好，对不起，我是用手机打字（现在更新），是的，我有很多，我看不到你的想法，你能更具体吗？顺便说一句，这些元素是卡片，所以我需要将卡片数据显示为模态
查看我的编辑。模态与这个问题有什么关系吗？我不知道它如何适合您的问题。
模态将显示点击的卡片内容，所以是的，我认为您正在向我展示其他内容（使用 v-show 和 v-if 隐藏和显示元素）

【解决方案2】：

我找到了解决方案。

将卡片数据创建到数据实例中的对象数组中
使用 v-for 循环卡片

创建一个捕获点击的卡片的方法，在data中创建一个projectSelected值

<button @click="showModal = !showModal,open(project)">Open</button>
captureProject(card) {
    this.projectSelected = project;
},

在模态框内显示选中的项目

{{ projectSelected .title }}

【讨论】：