Vue - 属性内插值/使用简写

Question

我在编译 .Vue 文件时遇到问题。 我正在使用 Vue.js 和 Laravel 运行 SPA。

我目前正在尝试在下面添加到我的Home.vue：

<ais-index app-id="{{ config('scout.algolia.id') }}" api-key="{{ env('ALGOLIA_SEARCH') }}" index-name="contacts">

    <ais-input placeholder="Search contacts..."></ais-input>
    <ais-results></ais-results>

 </ais-index>

但是，这给了我这个错误：

- app-id="{{ config('scout.algolia.id') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- api-key="{{ env('ALGOLIA_SEARCH') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

我什至尝试在这样的属性之前添加:，正如错误提示的那样：

<ais-input placeholder="Search contacts..."></ais-input>
<ais-results></ais-results>

但这给了我这个错误：

  - invalid expression: Unexpected token { in

    {{ config('scout.algolia.id') }}

  Raw expression: :app-id="{{ config('scout.algolia.id') }}"

  - invalid expression: Unexpected token { in

    {{ env('ALGOLIA_SEARCH') }}

  Raw expression: :api-key="{{ env('ALGOLIA_SEARCH') }}"

Answer 1

好的，我终于想通了。

根据Laravel's docs，我们可能会通过在您的.env 文件中使用MIX_ 前缀来将环境变量注入Mix

然后我在我的.env 中定义这些env variables，如下所示：

ALGOLIA_APP_ID=XXXXX
ALGOLIA_SECRET=YYYYY
MIX_ALGOLIA_APP_ID=XXXXX
MIX_ALGOLIA_SECRET=YYYYY

所以，在我的 Home.vue 文件中，我有这个：

<script>
    export default {
        data() {
            return {
                query: '',
                angoliaAppId: process.env.MIX_ALGOLIA_APP_ID,
                angoliaAppKey: process.env.MIX_ALGOLIA_SECRET,

            };
        }
    };
</script>

我现在可以像这样访问它们：

:app-id="angoliaAppId" :api-key="angoliaAppKey"

奖金信息：

在这里提出这个问题之前，我确实阅读了 Laravel 文档，并且我还将 MIX. 变量添加到了我的 .env 文件中。

但是，你需要重新编译 npm。使用 npm watch 不会捕捉到这些变化。所以你必须使用：

npm run dev 或 npm run production