小编Bou*_*him的帖子

我正在使用 Vue.js 3，但由于此错误，我无法使用 Vue-chartjs 制作图表：

Uncaught TypeError: createElement is not a function
    at Proxy.render (BaseCharts.js?86fc:8)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)
    at patch (runtime-core.esm-bundler.js?5c40:3991)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4180)

这是显示我的图表的 App.vue：

<template>
  <line-chart />
</template>

<script>
import LineChart from "./components/Chart";
export default {

  name: "App",
  components: {
    LineChart
  }
};
</script>

这是呈现折线图的 Chart.vue：

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data: () …

当我添加服务器时,您可以在此检查此警告.请帮帮我.谢谢

我做了很多阅读，但没有一个链接告诉我如何在 vuejs 中添加字体。这就是我在我的 less 文件中导入字体的方式。

@font-face {
  font-family: "Questrial";
  src: url("../../fonts/Questrial-Regular.ttf");
}

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

这是我得到的错误

./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 中的错误 1:4 模块解析失败：意外字符 '' (1:4) 您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）

我是 VUEJS 的新手，之前对 react 或 angular 一无所知。我只知道 jquery 和 javascript。所以请有人给我一个包含字体的分步指南。提前致谢 ：）

我正在使用Vuelayers库开发Web映射应用程序，该库是具有OpenLayers功能的Web map Vue组件。

我的模板中包含以下代码：

<vl-map @singleclick="hideOverlay" @postcompose="onMapPostCompose"
 :load-tiles-while-animating="true" ref="map"
:load-tiles-while-interacting="true" data-projection="EPSG:4326"
style="height: 900px" @mounted="onMapMounted">
 ....

  <component v-for="layer in layers" :ref="layer.id" overlay
    :is="layer.cmp"
    :key="layer.id" v-bind="layer">
        <component :is="layer.source.cmp" v-if="layer.visible" v-bind="layer.source">
        </component>
    </component>
     ....
</vl-map>

在数据对象中，我具有以下属性：

     layers: [

            {
                id: 'sections',
                title: 'Sections',
                cmp: 'vl-layer-tile',
                visible: true,

                source: {
                    cmp: 'vl-source-wms',
                    url: 'http://localhost:8080/geoserver/sager/wms',
                    layers: 'sections',
                    tiled: true,
                    format: 'image/png',
                    serverType: 'geoserver',
                },
            },
     ....
    ]

那么，当我单击图层时如何获取图层属性？知道那vl-tile-layer没有这里@click提到的事件。

我正在使用Vuetify并尝试在v-text-field单击按钮时将文本从组件复制到剪贴板。Sample code available on codepen：

<template>
    <div id="app">
      <v-app id="inspire">
        <v-container>
          <v-text-field v-model="text1"></v-text-field>
          <v-btn @click="copyText">copy</v-btn>
        </v-container>
      </v-app>
    </div>
</template>

<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() { 
        return {
          text1: 'lorem ipsum 123'
        }
      },
      methods: {
        copyText (){
          // copy to clipboard
        }
      }
    })
</script>

问题是copyText在Vue实例的方法中放什么代码？

我已经v-text-field但无法在v-text-fielddom 位置之外显示错误消息。在 vuetify 文档中没有提到这个问题。

是否可以将错误消息放在输入附近？

实际的：

预期的：

<template>
  <v-app>
    <v-content>
      <playground></playground>
      <v-text-field
        style="width:120px;"
        class="numer"
        :rules="[rules.required, rules.min, rules.max]"
        v-model="numValue"
        type="number"
        append-outer-icon="add"
        @click:append-outer="increment"
        prepend-icon="remove"
        @click:prepend="decrement"
      ></v-text-field>
      {{numValue}}
    </v-content>
  </v-app>
</template>

<script>
import Playground from "./components/Playground";

export default {
  name: "App",
  components: {
    Playground
  },
  data: function() {
    return {
      numValue: 0,
      form: {
        min: 2,
        max: 10
      },
      rules: {
        required: value => !!value || "Required.",
        min: v => v >= this.form.min || `The Min is ${this.form.min}`,
        max: …

我正在使用带有组件延迟加载的反应路由器并使用Webpack作为捆绑器，当我访问主页时，/ 我可以在网络选项卡中看到 bundle.js已加载，并且当我单击侧栏中的特定项目时，对应的组件例如0.bundle.js，使用其文件名成功加载，但是当我直接从搜索栏导航到嵌套路由（示例http://127.0.0.1:8080/forms/select）时，我收到如下错误：

GET http://127.0.0.1:8080/forms/bundle.jsnet::ERR_ABORTED 404（未找到）

此错误表示bundle.js未加载，这意味着它无法加载其他块。

webpack.config.js

const webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    module: {
        rules: [],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js',
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        historyApiFallback: true,
        
    },
};

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

路由.js

import …

如何将此对象格式化为对象数组

const failed = { 
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with set number '4579043641' exists!",
  "4579043640": "Lodge with set number '4579043640' exists!",
}

到这个预期的输出

[
  {
    "fieldName": "4579043642",
    "message": "set number '4579043642' exists!"
  },
  {
    "fieldName": "4579043641",
    "message": "set number '4579043641' exists!"
  },
  {
    "fieldName": "4579043640",
    "message": "set number '4579043640' exists!"
  }
]

data() {
  return {
    formattedList: [],
  };
},

我尝试过使用这种格式进行转换；

const failed = { 
  "4579043642": "Lodge with set number '4579043642' exists!",
  "4579043641": "Lodge with …

有没有在方法上使用 lodash debounce 的解决方案？我还需要函数中的“this”。例子：

data() {
    info: 'Read Me!'
},
methods: {
  readData() {
      console.log(this.info)
  }
}

在 Vue2 中我可以使用：

methods: {
  readData: debounce(function() {
      console.log(this.info)
  }, 500)
}

每次我在代码中使用“this”关键字时，它都会突出显示并表示“对象可能未定义”