bootstrap-vue 模式不显示

Posted 2023-02-23

【中文标题】bootstrap-vue 模式不显示

【英文标题】：bootstrap-vue modal not displaying

【发布时间】：2018-12-07 00:15:47

【问题描述】：

环境

dotnet core 2.1.0

"bootstrap-vue": "^2.0.0-rc.11",
"nuxt": "^1.4.1",
"vue": "^2.5.16",
"vue-axios": "^2.1.1",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.5.16",
"vue-toasted": "^1.1.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^4.0.1"

我不知道如何让一个简单的 bootstrap-vue 模式工作。 modal-sample 组件呈现，按钮可见，但单击按钮时没有任何反应（模态不会“显示”）。

但是，在 vue 开发工具中，我可以看到发出了 show 事件。此外，如果我将代码复制并粘贴到 bootstrap-vue 游乐场，它可以工作，所以它必须是我的设置。不确定它是否重要，但它也在 dotnet 核心环境中运行。

webpack.config

  const VueLoaderPlugin = require('vue-loader/lib/plugin');

  ...

  resolve: 
        extensions: ['.js', '.vue'],
        alias: 
            'vue$': 'vue/dist/vue',
           ...
        
        ...
        ,
    module: 
        rules: [
             test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' ,
             test: /\.js$/, 
                include: [/ClientApp/, 
                require.resolve("bootstrap-vue")], 
                use: 'babel-loader' ,
             test: /\.css$/, 
                use: isDevBuild ? ['vue-style-loader', 'style-loader', 'css-loader'] : ExtractTextPlugin.extract( use: 'css-loader' ) ,
             test: /\.(png|jpg|jpeg|gif|svg)$/, 
                use: 'url-loader?limit=25000' 
        ]
    ,
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DllReferencePlugin(
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        )
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin(
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        )
    ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin(use: 'site.css', fallback: 'vue-style-loader')
        ])
];

app-root.vue

  import Swapshift from './modal-sample'
  Vue.component('modal-sample', Swapshift);

modal-sample.vue

 <template>
    <div style="margin-top: 20px; padding: 10px;">
      <b-button variant="primary" v-b-modal.newSwapShiftModal>New Swap Shift</b-button>
      <b-modal id="newSwapShiftModal" title="New Swap Edit" >
        <div class="d-block text-center">
            <h3>Hello From My Modal!</h3>
        </div>
      </b-modal>
    </div>
 </template>

 <script>
   import  mapActions, mapState  from 'vuex'
   import bModal from 'bootstrap-vue/es/components/modal/modal'
   import bModalDirective from 'bootstrap-vue/es/directives/modal/modal' 

 export default 
    components:  bModal ,
    directives:  bModalDirective ,
    data() 
       return 
          swapshift: 
            id: 1,
            status: 
                id: 1,
                description: 'Requested'
            
          
        
    ,
    computed:    
    ,
    methods: 
    ,
    async created() 
       console.log('...in modal-sample1');
    
  
 </script>

【参考方案1】：

html 属性都被翻译成lowercase。这包括按钮上的指令属性的一部分。所以发生的情况是，当 vb-modal 指令接收到修饰符（即.newSwapShiftModal）时，它会从浏览器接收newswapshiftsodal（所有属性总是被浏览器小写）。

因此，您需要将模式上的id 设置为小写（因为引号内的属性值保留其大小写）。

 <template>
    <div style="margin-top: 20px; padding: 10px;">
      <b-button variant="primary" v-b-modal.new-swap-shift-modal>New Swap Shift</b-button>
      <b-modal id="new-swap-shift-modal" title="New Swap Edit" >
        <div class="d-block text-center">
            <h3>Hello From My Modal!</h3>
        </div>
      </b-modal>
    </div>
 </template>

显示 ID 区分大小写问题的小提琴示例：https://jsfiddle.net/4cnk28yw/

编辑：还使用正确的名称注册指令（如@ittus 所述）：

import  mapActions, mapState  from 'vuex'
import  BModal, VBModal  from 'bootstrap-vue'

export default 
  components:  BModal ,
  directives:  'b-modal': VBModal ,
  // ...

【讨论】：

.thisIs驼峰式，Vue实际上转换为.this-is，称为kebab case。

是的，blah-blah 被称为 kebab case....或 _ 代替）。 Vue 不会自动将指令修饰符/参数转换为 kebab 大小写，并且在使用浏览器内模板时也不会（浏览器在 Vue 之前首先解析 HTML，将 *所有属性 转换为小写）

【参考方案2】：

指令名称应为b-modal。你应该尝试改变：

directives:  
  'b-modal': bModalDirective 

【讨论】：

感谢@ittus 的建议，但没有成功