我尝试为maxLength来自 的输入实现 a bootstrap-vue，但是从我从他们的文档中读取的内容来看，他们不支持 max. 如果我删除type="number"，它可以工作，但不再是一个数字。

    <b-form-input
        size="sm"
        v-model="register_volume_first"
        type="number"
        maxlength=4
        placeholder="1902"
    ></b-form-input>

我有：

    <v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1">

        <template v-slot:item.id="{ item }">
            {{item.id}}
        </template>

如何将该列的内容垂直居中对齐？

重现步骤：

如果它的多选要求规则不起作用，如果它不是一个倍数就可以了。

预期行为

规则也适用于多选

实际行为

如果它的多项选择规则不起作用

复制代码：

 <div id="app">
     <v-app id="inspire">
      <v-select
         :items="role"
         label="Admin level*"
         class="mt-3 "
         @focus="reset"
         item-text="name"
         item-value="name"
         v-model="roleee"
         required
         :rules="rules.select"
      ></v-select>
      <v-select
         :items="subsidiaries"
         label="Subsidiary*"
         class="mt-3 "
         @focus="reset"
         item-text="name"
         item-value="name"            
         v-model="subsidiariesss"
         multiple
         required
         :rules="rules.select"
         :menu-props="{ bottom: true, offsetY: true }"
       ></v-select>
      </v-app>
     </div>
     <script>
        new Vue({
        el: '#app',
        data: {
         role:[
          {name:'Admin', id:1},
          {name: 'SuperAdmin', id:2}
          ], 
          subsidiaries: [
           {name: "ASdsad", id:1},
           {name: "dsd", id:2},
           {name: "34", id:3},
           {name: "ASvxcdsad", id:4}
          ],
          rules: {
           select: [v => !!v …

编码

https://stackblitz.com/edit/vue-ttt?file=src/main.js

问题

我正在尝试在 StackBlitz 中构建一个简单的井字游戏应用程序。这是我的 main.js 文件：

import Vue from "vue";
import App from "./App.vue";
import TicTacToe from "./components/TicTacToe";
import Cell from "./components/Cell";

Vue.component("tic-tac-toe", TicTacToe);  // error: "cannot read property 'component' of undefined"

还要注意我的package.json文件有 vue 作为依赖项：

"dependencies": {
  "vue": "^3.0.0"
},

所以错误意味着需要定义Vue，好吧，所以我参考了3x文档：

const app = Vue.createApp({ /* options */ })

但我得到 Cannot read property 'createApp' of undefined

那么我尝试定义一个实例：

const Vue = new Vue({});

我得到 Cannot access 'Vue' before initialization

因此，基于对该错误的谷歌搜索，我尝试：

Vue = new Vue({})

我明白了 …

我读到我们不应该在 vuejs 中将 v-if 和 v-for 放在一起。我的 IDE 也出现错误。我该如何在代码中分离 v-if 和 v-for 以便它遵循样式指南？

<div
        v-for="(value, key, index) in items"
        v-if="value.level === undefined || value.level < level"
        :key="key"
      >

level 也是一个计算值

computed: {
    level() {
      return (
         user.access>3
      );
    }
  },

我刚刚开始使用 Vue.js 并通过一些在线代码片段和教程学习它。我正在尝试为我的 vue 项目实现国际化支持，但在网络控制台中出现错误。

这是我的代码片段

主文件

import { createApp } from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n'
import router from './router/index'

function loadLocaleMessages () {
    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    const messages = {}
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
        if (matched && matched.length > 1) {
            const locale = matched[1]
            messages[locale] = locales(key)
        }
    })
   return messages
}

const i18n = VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: loadLocaleMessages()
}) …

在 vuejs3 应用程序中，我使用 axios 方法从数据库中检索数据，例如：

<script>
  import appMixin from '@/appMixin'
  import app from './../../App.vue' // eslint-disable-line
  import axios from 'axios'

  const emitter = mitt()

  export default {
    name: 'adminCategoriesList',
    mixins: [appMixin],
    data: function () {
      return {
        categoriesPerPage: 20,
        currentPage: 1,
        categoriesTotalCount: 0,
        categories: []
      }
    },

    components: {
    },
    setup () {
      const adminCategoriesListInit = async () => {
        this.loadCategories() // ERROR HERE
      }

      function onSubmit (credentials) {
        alert(JSON.stringify(credentials, null, 2))
        console.log('this::')
        console.log(this)
        console.log('app::')
      }

      onMounted(adminCategoriesListInit)

      return {
        // …

在 VueJS 2 中，我可以像这样全局使用 momentJS：

在main.js：

import moment from 'moment';
moment.locale('fr');
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

在任何组件中：

{{ item.date_creation?$moment(item.date_creation).format('l'):'No date'}}

在 VueJS 3 中，我尝试在 main.js 中执行以下操作：

import { createApp } from 'vue';
import moment from 'moment';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';

moment.locale('fr');

createApp(App).use(moment).use(store).use(router)
  .mount('#app');

但实际上我不能在我的任何组件中使用“时刻”，我必须在每个组件中导入“时刻”。难道就没有更好的解决办法吗？我读了很多文档和教程，但没有看到任何好的东西......提前致谢。

编辑：这是我在组件中使用 $moment 的方式：

<template>
  <div class="xx" :key="'title-'+myReactiveVariable.title">
    <h1>{{ myReactiveVariable.title }}</h1>
    <div class="yy">
      {{ myReactiveVariable.content }}
    </div>
    <footer>
      Sent on
      {{ myReactiveVariable.date }}
      by …

我在我的一个组件中使用 Vue 组合 API，但在让组件根据计算的 prop 更改显示正确的渲染值时遇到一些问题。看来，如果我将 prop 直接输入到组件渲染中，它会按应有的方式做出反应，但当我将它传递给计算属性时，它不会。

我不确定为什么这是因为我期望它在计算属性中也是反应性的？

这是我的代码：

应用程序.vue

<template>
  <div id="app">
    <Tester :testNumber="testNumber" />
  </div>
</template>

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

export default {
  name: "App",
  components: {
    Tester,
  },
  data() {
    return {
      testNumber: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.testNumber = 2;
    }, 2000);
  },
};
</script>

测试器.vue

<template>
  <div>
    <p>Here is the number straight from the props: {{ testNumber }}</p>
    <p>
      Here is the number when it goes through computed (does not …

大家好，今天我通过脚本设置迁移到 vue 3。

我尝试使用 onBeforeMount 加载外部数据（异步等待）。

但收到错误：“onBeforeMount 未定义”

我查看文档并发现 onBeforeMount 应该可以工作！有什么问题吗？

<script setup>
import { ref } from '@vue/reactivity';
import axios from 'axios';

var data = ref(null);

onBeforeMount(async () => {
    data.value = await axios.get("url");
})
</script>