使用 vue JS 单击时显示组件答案

【问题标题】：Show Component on Click with vue JS使用 vue JS 单击时显示组件
【发布时间】：2020-08-19 15:02:44
【问题描述】：

我想在触发“点击”事件后显示一个模态组件。是否可以使用方法调用显示组件？或者在这种情况下最佳做法是什么？

我的用例如下：

我有多张卡片，其中包含一些关于某事的信息。当用户点击一张卡片时，应该会弹出一个模态组件并显示有关此卡片的更多详细信息。

<div class="card" @click="showDetails()">
<h3 class="header">{{ Name }} {{ Type }}</h3>
<div class="container">
  some Information<br>
  more Information<br>
</div>



export default {
  props: {
    job: Object
  },
  components: {
  },
  methods: {
    showDetails() {

    }
  },
  name: "card"
};
</script>

【问题讨论】：

请分享您的代码的相关部分
@click 后需要调用方法。我不知道如何从方法调用中打开组件。你知道吗？
如果您可以共享您的代码或小提琴或沙箱，它将更容易为您提供帮助。
@DisDes，你愿意使用 vue bootstrap 吗？

标签： javascript vue.js

【解决方案1】：

例如。使用您的组件创建模态（我使用 bootstrap-vue）

 <b-modal ref="my-component" >
     <your-component></your-component>
 </b-modal>

并将事件添加到@click方法

this.$refs.my-component.show();

【讨论】：

我只想在用户点击卡片时显示模态
嗯，好的。你有一些模态和方法 showDetails() 来显示你的模态。让我们将“ref”添加到您的模态：，然后将此代码：this.$refs.modal.show() 添加到您的方法 showDetails()。

【解决方案2】：

通常您想使用 Bool 来控制模态框是否可见。只需使用@click (v-on:click) 即可切换 Bool。

在数据中：

modal: false

然后在一个按钮上：

<button @click="modal = !modal">Click me to toggle modal</button>

编辑：忘记在模态上添加逻辑：

<modal v-model="modal"></modal>

v-model 只是意味着它不显示它是否为假，如果它是真的，它会显示。

更多信息：https://vuejs.org/v2/api/#v-model

我希望这就足够了。

忠告：下次用更多代码给出更好的解释。不然大家想回答的都是猜测。

【讨论】：

【解决方案3】：

这个问题似乎有一个额外的逻辑，因为您有多个包含不同项目的卡片，您希望每次都打开一个带有单个项目信息的模态，并且可能您不想为所有记录创建 N 个模态卡片中的显示。

正如前面的答案所述，您可以通过调用方法打开模态，也可以打开模态替换允许它的变量值，但您还需要关闭模态，这是您必须执行的额外逻辑记住。

你可以像这里一样拥有一个事件指令，也可以拥有你的模态代码（大多数时候是组件）：

<div class="card" @click="showDetails()">

<my-modal-component v-show="openModal" >
   <my-card-information-component />
</my-modal-component>

在您的脚本中，您必须声明将触发星期一显示的属性以及更改该属性的方法

export default {
    data(){
        return {
           showModal:false
        }
    },
    methods:{
       showDetails(){
           this.showModal = true;
       }
    }
}

要关闭模态，您有多种选择，您可以向组件添加一个按钮，单击模态背景等。但要实现这一点，您需要从子组件向父组件发出一个事件，该事件将更新showModal 属性返回 false 并关闭模态框。

【讨论】：

【解决方案4】：

这对我有用。

请注意，截至 2022 年 2 月 17 日，我的答案在 Vue3 中

<script setup>
  // set a boolean ref value as false. we will be using the openModal function to trigger its change
  let showModal = ref(false);

  // create the openModal function and set showModal to true
  const openModal = () => {
    showModal.value = true;
    // console.log(showModal);
  };
</script>  

<template>
  // Here is our modal. It will only display on the page once we click the button that triggers the openModal function
    <Modal v-if="showModal" />
  
  // Here is the button that triggers the openModal function, changing the showModal boolean value to true
    <button v-on:click="reply" type="button">Reply</button>
</template>

【讨论】：