代码之家 › 专栏 › 技术社区 › oliverbj

Vue-属性内插/使用速记

laravel-blade vue.js laravel php

0

oliverbj · 技术社区 · 7 年前

我对编译 .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') }}"

1 回复 | 直到 7 年前

1

oliverbj 7 年前

好吧,我终于明白了。

根据 Laravel's docs ,我们可以通过在 .env 归档 MIX_

然后我定义这些 env variables 在我的 .env环境 这样地:

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"

在问这个问题之前,我确实读过拉维尔的文档,我还添加了 MIX. 我的变量

但是,您需要重新编译npm。使用 npm watch 不捕获这些更改。所以你必须使用:

npm run dev 或 npm run production