小编Bou*_*him的帖子

我有一个非常奇怪的错误,在页面加载组件mounted和beforeMount火/运行两次？我的每个组件都代表一个页面,所以当我mywebsite.com/contact在Contact.vue函数上加载页面mounted并beforeMount激活/运行两次但是如果我mywebsite.com/foo在Contact.vue函数上加载页面mounted并beforeMount激活/运行一次(这是我认为的？应该发生).

知道为什么这些函数会执行两次吗？我有一些挑剔的设置,但它适用于动态模板.

router/index.js:

const router = new Router({
routes: [
  {
      path: (window.SETTINGS.ROOT || '') + '/:slug',
      name: 'Page',
      component: Page,
      props: true
  },
]
})

Page.vue:

<template>
  <component v-if="wp" :is="templateComponent" v-bind:wp="wp"></component>
  <p v-else>Loading...</p>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
import * as Templates from './templates'

// Map templates
let templateCmps = {}
_.each(Templates, …

我有一个父组件，它向子组件发送一个数据对象，如下所示：

<child object-data=" url: 'url here', title: 'Title'"></child>

然后在我的子组件上，我通过执行以下操作获取此对象数据：

<script>
    export default {
        props: [
            'objectData'
        ]
    }
</script>

现在，出于某种原因，我可以毫无问题地使用标题{{ objectData.title }}并显示出来。

但是当涉及到 img 标签内的 URL 时，它不会呈现图像。

我尝试执行以下操作：

<img :src="objectData.url"/> <--- 不渲染

<img v-bind:src="objectData.url"/> <--- 不渲染

<img v-bind:src="require(objectData.url)"/> <-- 抛出警告错误，因为我猜它不是路径而是对象。

<img v-bind:src="{objectData.url}"/> <--- 抛出错误

<img v-bind:src="{{objectData.url}}"/> <--- 抛出错误

当我检查 dom 元素时，它之后甚至不包含 src 属性。

如果我写下没有对象的 URL，它就可以工作。

<img v-bind:src="src/assets/images/icon.png"/>

但我希望我的 URL 来自父组件。

关于如何解决这个问题的任何想法？我在我的 webpack 文件中添加了 url-loader：

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            }

我还尝试objectData.url从计算/方法函数返回：

computed: {
     getImageUrl: function() { …

有没有一些简单的方法如何在 nuxtjs asyncData 函数中读取 POST 请求参数？

下面是一个例子：

表单.vue：

<template>
    <form method="post" action="/clickout" target="_blank">
         <input type="hidden" name="id" v-model="item.id" />
         <input type="submit" value="submit" />
    </form>
</template>

将以前的表单路由提交到以下 nuxt 页面：

Clickout.vue

async asyncData(context) {
    // some way how to get the value of POST param "id"
    return { id }
}

我是 Vue.js Nuxt 和所有前端内容的新手。

我有一个关于 API 调用的问题。我不确定什么是正确的方法，这里的最佳实践。

我有一家店。在那个商店中，我有调用我的 API 并设置状态的操作，例如。

async fetchArticle({ state, commit }, uuid) {
    const response = await this.$axios.get(`articles/${uuid}/`)
    commit('SET_ARTICLE', response.data)
},

这很好，它适用于一个组件。

但是如果我只想获取文章而不改变状态怎么办。

为了 DRY，我想到的第一件事是创建获取数据并在需要的地方使用的服务层。

这是正确的方法吗？在哪里可以找到一些可以从中汲取灵感的真实示例？

如何在 Vue.js 中的 setup 方法中访问 $route.params 属性？当我尝试在其他方法或模板内访问它时，一切正常，但我无法在设置方法内访问它。

我正在Bootstrap-Vue编写一个网页，但我无法更改 上的文本颜色Bootstrap navbar，尤其是b-nav-item-dropdown标签。我曾尝试使用<span class="text-dark"环绕b-nav-item-dropdown标签，但没有奏效。看来， 的变体b-navbar只能将文本颜色变体设置为深色或浅色。

这是我的代码：

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

我的目标是让所有文本b-nav-item-dropdown都变成黑色而不是灰白色。

Vue.js 的 Vuetify 提供了一种向扩展面板添加图标的方法 ( https://vuetifyjs.com/en/components/expansion-panels#custom-icon )。但是，我希望将它们放在标题的左侧，如下面的屏幕截图所示。

该CodePen只显示方式如何添加图标，但在右侧。我已经尝试了下面的 2 个片段，但没有任何成功。

<template v-slot:actions>
  <v-icon left>mdi-check</v-icon>
</template>

和

<v-icon left>mdi-check</v-icon>

两者都没有预期的结果。

我正在使用 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: () …

学习Vue公司组成的API（和打字稿），从我发现的文档，我应该使用ref(null)一个子组件我有内部使用<template>...</template>。

这个子组件有像这样的方法open()，我像这样访问它：

setup() {
    const subcomponentRef= ref(null);
    subcomponentRef.value.open();
    return { subcomponentRef };
}

我同意这可能会显示Object is possibly 'null'.指向的错误subcomponentRef.value，但奇怪的是即使我添加了条件if (subcomponentRef !== null && subcomponentRef.value !== null) { ... }，它仍然显示该错误。为什么？？

也尝试访问它，subcomponentRef?.value?.open()但我收到此错误Property 'open' does not exist on type 'never'.。

还尝试添加非空断言，例如confirmation.value!.open();并收到相同的错误Property 'open' does not exist on type 'never'.。

知道这里有什么问题吗？或者ref(null)，我应该使用实际组件预定义它而不是使用？但我不知道如何正确地做到这一点，在文档中找不到。

在 vue 2 中，您可以从 .js 文件访问 Vue 实例全局 api，如下所示：

Vue.prototype.$auth

在 Vue 3 中，你有应用程序实例，据我所知，它现在只存在于 main.js 中

例如，如果我有 helper.js，我如何app.config.globalProperties.$auth从帮助文件中访问？