编辑1

Question

我正在创建我的第一个vuejs组件，如下所示：

// modal.vue
<template>
 <div id='my-modal'>

    <div class='modal'>
        {{ title }}
    </div>

 </div>
</template>

<script>

export default {
    template: '#my-modal',
    props: ['title'],

    created () {
        console.log('modal works')
    }
}

</script>

目标是导入该文件并通过<modal></modal>标记进行调用并将标题传递给它。这是我导入上述模态的文件。

// home.vue

<template>
    <div>
        <modal :title='title'></modal>
    </div>
</template>
<script> 
import modal from './modal'
export default {

    components: {modal},
    data () {
        return {
            title: "HELLO!!"
        }
    }
}

</script>

然而，尽管传递<modal :title='title'></modal>，但我无法在第一个示例中显示标题。

我做错了什么？

Answer 1

看不到代码有什么问题。所以我的猜测如下：

您已导入引导程序。 bootstrap包含一个名为modals.less

的文件

它包含将您的组件放在display:none上的css代码。尝试将modal.vue的根div的类名更改为其他内容，例如：hidar并报告回来。

// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  -webkit-overflow-scrolling: touch;
}

编辑1

您项目中的任何其他css框架或文件都可能导致此类问题（我个人可以使用bootstrap重现它）。您需要做的关键调试步骤如下：

打开Chrome开发工具。找<div class="modal">
查看它是否包含文字。它可能包含文本。我不看到它不会
检查样式。查找display:none或任何其他可能干扰显示文字的CSS样式。

无法在vuejs中传递/接收prop值

1 个答案:

编辑1