小编Bou*_*him的帖子

我有一个嵌套对象，只想打印对象名称。我如何在 vue.js 中做到这一点？

var object1 = {
  'obj1' : {
    'obj1a' : 'a',
    'obj1b' : 'b'
  },
  'obj2' : {
    'obj2c' : 'c',
    'obj2d' : 'd'
  }
}

此代码打印正在迭代的对象的全部内容：

<div v-for="obj in object1" v-bind:key="obj">
  {{ obj }}
</div>

我怎样才能让它只打印字符串obj1和obj2？

谢谢！

在 Vue2 上，我只添加了 CDN，然后我的 js 文件中就有 Vue 可用，但在 Vue3 上我不能这样做 - 我的 js 文件没有检测到 Vue。为了使用Vue3，我该如何解决？

我如何将 vuex 注入 Vue 3，在 Vue 2 中可能像：

new Vue({
  el: '#app',
  store: store,
})

但是在 Vue 3 中你会怎么做，因为没有new Vue().

我对所有这些都是新手，现在正在学习 Vue。我已经安装了 Vuex，使用导出默认值，然后导入它，但仍然收到此错误 =>

警告在 ./src/store/index.js 中编译有 1 个警告
警告“在‘vuex’中找不到导出‘createStore’

index.js 存储文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import coachesModule from './modules/coaches/index.js';

const store = new Vuex.Store({
  modules: {
    coaches: coachesModule
  }
});

export default store;

package.json 文件

{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": …

我希望我可以包含完整的代码。不然很难理解我的问题。

我为我的 Vue 应用程序创建了一个可组合函数，其目的是从数据库中获取文档集合。\n可组合函数如下所示：

import { ref, watchEffect } from 'vue'\nimport { projectFirestore } from '../firebase/config'\n\nconst getCollection = (collection, query) => {\n    const documents = ref(null)\n    const error = ref(null)\n\n    let collectionRef = projectFirestore.collection(collection)\n    .orderBy('createdAt')\n\n    if (query) {\n        collectionRef = collectionRef.where(...query)\n    }\n\nconst unsub = collectionRef.onSnapshot(snap => {\n        let results = []\n        snap.docs.forEach(doc => {\n            doc.data().createdAt && results.push({ ...doc.data(), id: doc.id })\n        })\n        documents.value = results\n        error.value = null\n    }, (err) => {\n        console.log(err.message)\n        document.value = null\n        error.value = …

我正在用 TypeScript 编写 Nuxt 应用程序。我在尝试访问 Nuxt 上的 $i18n 对象时遇到了问题。我在 VS Code 中收到一条警告：

Property '$i18n' does not exist on type 'MyClass'.

我的组件代码中的脚本部分如下所示：

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import ILocale from '~/types/vue/Locales'

  @Component
  export default class MyClass extends Vue {
    @Prop({ type: Boolean, default: true }) showLanguageSwitch!: boolean

    get availableLocales(): ILocale[] {
      return this.$i18n.locales.filter((l) => l.code !== this.$i18n.locale)
    }
  }
</script>

我在项目的根目录中有一个填充文件：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

这是我应该扩展接口的地方吗？我实际上如何做到这一点，因为Vue它不是 …

我正在使用 vue js 3，但我遇到了这个错误。我尝试使用路由器。

我的 main.js 文件在这里：

import { createApp } from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'  // i added this
import Vue from 'vue';    // and this
Vue.use(VueRouter);       // and this

createApp(App).mount('#app')

我的 package.json 文件在这里：

{
  "name": "router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0", …

我使用 vue 3 设置，我想访问我使用的全局变量 vuetify。\n我可以在 config.globalVariable 中看到它，但我无法在设置中使用它。

{_uid: 0, _component: {\xe2\x80\xa6}, _props: null, _container: div#app, _context: {\xe2\x80\xa6}, \xe2\x80\xa6}\ncomponent: \xc6\x92 component(name, component)\nconfig: Object\ncompilerOptions: (...)\nerrorHandler: undefined\nglobalProperties:\n$vuetify: {defaults: {\xe2\x80\xa6}}\n$messageSystem: {addMessage: \xc6\x92}\n__proto__: Object\nisNativeTag: (tag) => {\xe2\x80\xa6}\n...\n

如您所见，我看到了 $vuetify，但在设置中我无法访问它。

    setup() {\n       ...\n       this.$vuetify.theme.dark = true; \n       ...\n\n

这是我访问全局变量的方式吗？

我得到的错误：\nCannot read property \'$vuetify\' of undefined

我正在使用 VueJS 3 应用程序，其中使用vue-router、vue和core-js应用程序，我想在其中使用组件。我的视图目录Home.vue文件如下所示：

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    }, …

我通过引导项目内容然后构建它以进行部署来编写（业余）Vue3 应用程序^(*)。效果很好。

我需要创建一个可以直接在浏览器中加载的独立的单个 HTML 页面。几年前，当我开始使用 Vue 时（当时是在 v1 \xe2\x86\x92 v2 过渡期间），我曾经这样做过，当时我立即找到了正确的文档。

我找不到类似的 Vue3 和 Composition API。

显示值响应变量的框架页面是什么（我将在完整的构建应用程序的上下文中{{hello}}定义）<script setup>

这就是我过去的做法（我希望我做对了）

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title</title>\n    <script src="https://unpkg.com/vue@2"></script>\n</head>\n<body>\n\n<div id="app">\n    {{hello}}\n</div>\n\n<script>\n    // this is how I used to do it in Vue2 if I remember correctly\n    new Vue({\n        el: \'#app\',\n        data: {\n            hello: "bonjour!"\n        }\n        // methods, watch, computed, mounted, ...\n    })\n</script>\n\n</body>\n</html>\n

^{(*) 我实际上使用Quasar 框架，但这并没有改变我问题的核心。}