Модальное окно bootstrap-vue не отображается

среда

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 dev я вижу, что было сгенерировано событие 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'})
        ])
}];

приложение-root.vue

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

модальный-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>

vue.js .net-core vue-component bootstrap-vue
person Will Lopez    schedule 28.06.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Все атрибуты HTML переводятся в lowercase. Сюда входят части атрибута директивы на вашей кнопке. Итак, что происходит, когда директива v-b-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>

Пример скрипта, показывающего проблемы чувствительности к регистру в идентификаторах: https://jsfiddle.net/4cnk28yw/

РЕДАКТИРОВАТЬ: также зарегистрируйте директиву с правильным именем (как указано @ittus):

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

export default {
  components: { BModal },
  directives: { 'b-modal': VBModal },
  // ...
}
person Troy Morehouse    schedule 11.07.2019
comment
.thisIs camel case, Vue фактически преобразуется в .this-is, который называется kebab case. - person okay56k; 11.07.2019
comment
да, бла-бла называется case kebab .... Я просто использовал это в качестве примера ... это просто должны быть символы нижнего регистра (вместо этого я мог бы использовать не - символы или _). Vue не выполняет автоматическое преобразование в регистр kebab для модификаторов директив / args, и не при использовании шаблонов в браузере (браузер сначала разбирает HTML перед Vue, переводя * все атрибуты в нижний регистр) - person Troy Morehouse; 11.07.2019

arrow_upward
1
arrow_downward

Имя директивы должно быть b-modal. Вам следует попробовать изменить:

directives: { 
  'b-modal': bModalDirective 
}
person ittus    schedule 28.06.2018
comment
Спасибо @ittus за предложение, но это не сработало - person Will Lopez; 28.06.2018