我的 vue 组件没有出现，我也看不到哪里出错了，我希望另一双眼睛可以指出我哪里出错了。我正在运行 npm run watch 并且我已经清除了我的缓存。

我的 app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize …

Vuetify数据表未显示数据，它表明显示的1中有1行，但表主体为空。我的组件代码：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
  >
  </v-data-table>
</template>

<script>
export default {
  name: 'Users',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Fat (g)', value: 'fat' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          fat: 6.0,
        },
      ]
    }
  }
}
</script>

<style scoped  lang="stylus">
</style>

结果：

任何想法如何解决这个问题？

我正在使用 Vuetify 并尝试获取文本区域以仅在超过 200 个字符时进行验证。

如果用户有 1 个或更多字符，我只想使字段验证，但如果它至少是 1 个字符，则少于 200 个字符。这个文件不是必需的，但如果他们选择在其中输入数据，我想确保它不超过 200 个字符。

<v-textarea
    v-model="description"
    :counter="200"
    :rules="[v => (v && v.length <= 200) || 'Description must be 200 characters or less']"
    label="Description"
    height="125"
    no-resize
    outline
/>

我v-list在 flex 布局中创建，v-list 在列中水平填充剩余空间。但是如果列表包含很多总高度大于列高的元素，那么列表就会伸出来。我试图将 max-height 和 fix height 添加到 v-list，但随后列表项从 wrapper 伸出v-list。我试图添加 v-scroll 但这没有帮助。

那么如何创建 v-list，scrollable当列表中的项目多于可以出现在 div 中的项目时？

我尝试为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>

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

编码

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()
}) …

我在我的一个组件中使用 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 …