小编muk*_*ely的帖子

在 bootstrap-vue 表头中呈现的 HTML

我正在制作一个使用 NuxtJS、Bootstrap Vue 和 vue-i18n 的网站。

我有一个表格 ( <b-table>) 以平方米为单位显示面积,标题应显示:英文中的sq m和翻译中的m 2 ( m<sup>2</sup>)。

所以头字段标签是从 i18n 语言环境 JSON 绘制到单个文件组件的表头标签。字符串被正确绘制,但不幸的是没有呈现 HTML 部分,所以我在页面上看到的是m<sup>2</sup>.

这是我尝试解决它的方法(示例已简化 - 从中​​删除了部分):

hu.json(翻译语言环境文件)

{
  "in_numbers": {
    "space": "m<sup>2</sup>"
  }
}
Run Code Online (Sandbox Code Playgroud)

tableComponentFile.vue(单文件组件)

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader"
        />
          <template slot="HEAD_space" slot-scope="data">
            <span v-html="data.label"></span>
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 …
Run Code Online (Sandbox Code Playgroud)

vue.js nuxt.js vue-i18n bootstrap-vue

3
推荐指数
1
解决办法
5979
查看次数

nuxt.config.js 中的条件属性

我正在使用 nuxt.js开发一个网站,并且希望有条件地在nuxt.config.js中有一个配置选项:我想在运行npm rungenerate(构建静态)时更改路由器基础

这是开发环境的完整配置文件(npm run dev):

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  // if I uncomment the following three lines, the config is OK for npm run generate.
  // router: {
  //   base: '/app/'
  // },

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [ …
Run Code Online (Sandbox Code Playgroud)

configuration vue.js nuxt.js

2
推荐指数
1
解决办法
5509
查看次数

标签 统计

nuxt.js ×2

vue.js ×2

bootstrap-vue ×1

configuration ×1

vue-i18n ×1