Error compiling template invalid expression invalid or unexpected token in

I got this error when I try to compile a Laravel-Page with only one Vue.js Component.

What I’ve figured out is, that the error have to be something with this line or what it returns:

<a href="{{route('sites.showSnippet', $snippet->id)}}">
              <pre><code class="language-{{isset($langs[0]) ? $langs[0]->language_name : ''}}">{{$snippet->short_snippet}}</code></pre> 
            </a>

Once I delete $snippet->short_snippet it works with no problems.

in the IMG you can see what it returns

and here is the complete error log:

app.js:17685 [Vue warn]: Error compiling template:

invalid expression: Unexpected token > in

    "<p><a href=""+_s(route('searchTag', $tags))+"" title="search for "+_s($tags)+""> "+_s($tags)+"</a></p>ntt@endifnt</div>nt@endifnt<copy snippetid=""+_s($snippet->id)+""></copy>nt<div class="tooltip tooltip_views">n      <span class="tooltiptext">Views</span>n    <"

  Raw expression: <p><a href="{{route('searchTag', $tags)}}" title="search for {{$tags}}"> {{$tags}}</a></p>
        @endif
    </div>
    @endif
    <copy snippetid="{{$snippet->id}}"></copy>
    <div class="tooltip tooltip_views">
      <span class="tooltiptext">Views</span>
    <


91 |            <small>test@test.com, 2019-07-17</small>
92 |              <a href="http://codesnippet.local/snippet/3">
93 |                <pre><code class="language-">&lt;p&gt;&lt;a href="{{route('searchTag', $tags)}}" title="search for {{$tags}}"&gt; {{$tags}}&lt;/a&gt;&lt;/p&gt;
   |                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94 |        @endif
   |  ^^^^^^^^
95 |    &lt;/div&gt;
   |  ^^^^^^^^^^^^^
96 |    @endif
   |  ^^^^^^^
97 |    &lt;copy snippetid="{{$snippet-&gt;id}}"&gt;&lt;/copy&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
98 |    &lt;div class="tooltip tooltip_views"&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
99 |        &lt;span class="tooltiptext"&gt;Views&lt;/span&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
100|      &lt;</code></pre> 
   |  ^^^^^^^^

(found in <Root>)

Thanks for your help in advance.

Overview of the issue

After importing my JDL containing two entities with a OneToMany relationship and building the project, I am getting:

`Errors compiling template:

invalid expression: Unexpected token . in

!(editForm.controls.customer?.dirty && editForm.controls.customer?.invalid)`

It compiles if I remove the ‘?’ characters, of cause if the variable is null, it leads to an exception at runtime.

Motivation for or Use Case

Looks like the VueJS blueprints and the configuration don’t fit together.

Reproduce the error

• created a fresh project with jhipster --blueprint vuejs
• import a rather simple JDL file (see below)
• run gradlew

The JDL-File:

filter all
dto all with mapstruct
service all with serviceClass
paginate all with  infinite-scroll

entity Customer {
    number Integer required unique min(10000) max(99999),
    prefix String required unique pattern(/[a-z][a-z0-9]+/),
    name String required maxlength(80),
    contractualAddress String required maxlength(400),
    contractualSalutation String maxlength(80),
    billingAddress String maxlength(400),
    billingSalutation String maxlength(80)
}

entity Membership {
    sinceDate LocalDate required,
    untilDate LocalDate
}

relationship OneToMany {
  Customer to Membership{customer(prefix) required},
}

Suggest a Fix

The simplest would be to use ES5 in the templates and TypeScript/ES6 just for the class file. But maybe somebody with better knowledge in VueJS-Single-File-Components and TypeScript configurations has a better solution.

JHipster Version(s)

v5.8.2, not tried with earlier versions

JHipster configuration

INFO! Using JHipster version installed locally in current project's node_modules
INFO! Executing jhipster:info
INFO! Options: from-cli: true
##### **JHipster Version(s)**

vuetest-0@0.0.0 /home/mi/Projekte/vuetest0
└─┬ generator-jhipster-vuejs@1.0.0-beta2
└── generator-jhipster@5.8.2

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**


<details>
<summary>.yo-rc.json file</summary>
<pre>
{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "de.javagil.vuetest0"
    },
    "jhipsterVersion": "5.8.2",
    "applicationType": "monolith",
    "baseName": "vuetest0",
    "packageName": "de.javagil.vuetest0",
    "packageFolder": "de/javagil/vuetest0",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "no",
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "...",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.0.0-beta2"
      }
    ],
    "enableTranslation": false,
    "clientPackageManager": "npm",
    "blueprint": "generator-jhipster-vuejs",
    "blueprintVersion": "1.0.0-beta2",
    "enableHibernateCache": false
  },
  "generator-jhipster-vuejs": {
    "clientTheme": "none",
    "clientThemeVariant": "",
    "jhipsterVersion": "5.8.2",
    "applicationType": "monolith",
    "baseName": "vuetest0",
    "clientFramework": "vue",
    "useSass": true,
    "clientPackageManager": "npm",
    "enableTranslation": false
  }
}
</pre>
</details>


##### **JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory**

<details>
<summary>JDL entity definitions</summary>

<pre>
entity Customer {
  number Integer required unique min(10000) max(99999),
  prefix String required unique pattern(/[a-z][a-z0-9]+/),
  name String required maxlength(80),
  contractualAddress String required maxlength(400),
  contractualSalutation String maxlength(80),
  billingAddress String maxlength(400),
  billingSalutation String maxlength(80)
}
entity Membership {
  sinceDate LocalDate required,
  untilDate LocalDate
}
relationship OneToMany {
  Customer{membership} to Membership{customer(prefix) required}
}

dto Customer, Membership with mapstruct
paginate Customer, Membership with infinite-scroll
service Customer, Membership with serviceClass
filter Customer, Membership

</pre>
</details>


##### **Environment and Tools**

java version "1.8.0_162"
Java(TM) SE Runtime Environment (build 1.8.0_162-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.162-b12, mixed mode)

git version 2.17.1

node: v10.15.3

npm: 6.4.1

yeoman: 2.0.5

yarn: 1.3.2

Docker version 18.09.2, build 6247962

INFO! Congratulations, JHipster execution is complete!

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

Ubuntu Linux 18.04 — compile problem, not related to any browser

• Checking this box is mandatory (this is just to show you read everything)

I am trying to pass a variable from Blade to a Vue component prop. However, when I’m passing the variable, something goes wrong. The error which I receive is the following:

[Vue warn]: Error compiling template:

invalid expression: Invalid or unexpected token in

    [{"id":6,"name":"aaa","created_at":"2019-12-05

  Raw expression: :companies="[{"id":6,"name":"aaa","created_at":"2019-12-05"


153|                      <!-- Page Content -->
154|  
155|      <company_index :companies="[{&quot;id&quot;:6,&quot;name&quot;:&quot;aaa&quot;,&quot;created_at&quot;:&quot;2019-12-05" 14:35:38&quot;,&quot;updated_at&quot;:&quot;2019-12-05="" 14:35:38&quot;}]=""></company_index>
   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
156|      <!-- END Page Content -->
157|              </main>

(found in <Root>)

As you can see, a random quote is added which is NOT present in the datetime itself (after 2019-12-05). It only gets added when passing it to the Vue component. Here is my code from my blade file:

@extends('layouts.backend')

@section('content')
    <!-- Page Content -->

    <company_index :companies={{json_encode($companies)}}></company_index>
    <!-- END Page Content -->
@endsection

I’ve tried the following things:

• Checked to see if the datetime somehow had an extra quote, this was not the case.
• Checked if other Eloquent Models had the same problems, which they do (They also use standard datetimes from Laravel).
• Remove json_encode from my blade file
• Replaced :companies={{json_encode($companies)} with :companies={!! $companies !!}
• Searched for people with the same problem, but did not find anything about this problem.

I don’t think there is anything wrong with my code, but I don’t know for sure what my problem is. If you need more details, just ask.

following code works:

<draggable-pic :pics="{{ $pics }}" :gal-id="{{ $gallery->id }}"></draggable-pic>

and this does not:

<draggable-pic :pics="{{ $pics }}" :gal-id="{{ $gallery->id }}" :ph-code="{{ auth()->user()->phcode }}" :gal-code="{{ $gallery->galcode }}"></draggable-pic>

this is the message I get:

app.js:44150 [Vue warn]: Error compiling template:

    invalid expression: Invalid or unexpected token in

    2AMJJK1

    Raw expression: :ph-code="2AMJJK1"


    75 |          
    76 |  
    77 |  <draggable-pic :pics="[{REMOVED LONG CONTENT FOR SEMPLICITY}]" :gal-id="37" :ph-code="2AMJJK1" :gal-code="D6687165"></draggable-pic>
       |                  
    ^^^^^^^^^^^^^^^^^^
    78 |  
    79 |  

    (found in <Root>)

and this are my props:

props: ['pics', 'galId', 'phCode', 'galCode']

what am I doing wrong?

EDIT:

I tried, and if I enter a number it works.. so I tried this:

props: {
  pics: String,
  galId: Number,
  phCode: String,
  galCode: String
}

but still, no luck.

here is my current VUE file:

<template>
<div class="row">
    <div class="col-12">
        <section class="list">
            <draggable class="drag-area" :list="picsNew" :options="{animation:200, group:'status'}" :element="'article'" @add="onAdd($event, false)"  @change="update">
                <article class="card" v-for="(photo, index) in picsNew" :key="photo.id" :data-id="photo.id">
                    <header>
                        <img :src="`/images/${ this.phcode }/${ this.galcode }/thumb/thumb_${ photo.filename }`">  {{ photo.filename }}
                    </header>
                </article>
            </draggable>
        </section>
    </div>
</div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    components: {
        draggable
    },

    props: {
        myPics: String,
        galId: Number,
        phCode: String,
        galCode: String
    } ,

    data() {
        return {
            picsNew: this.myPics,
        }
    },
    methods: {

        update() {
            this.picsNew.map((photo, index) => {
                photo.order = index + 1;
            });


            let photos = this.picsNew;
            console.log(photos)
            axios.put('/gallery/' + this.galid + '/updateAll', {
                photos: photos
            }).then((response) => {
                console.log(response.data);
            }).catch((error) => {
                console.log(error);
            })
        }

    }
}
</script>

<template>
  <div class="stats-search">
      <div v-for="row in statFields"  :key="row.id">

        {{row.id}} {{row.label}} {{row.options}}  // PRINTS OK, DATA IS PRESENT

        <hr>
      <q-select
        option-value="value"
        option-label="label"
        clearable
        filled
        multiple
        v-model="targets"
        :options="{{row.options}}" <--- SYNTAX?
        :label="'...'"
        >
      </q-select>
      -->
      </div>
  </div>
</template>

---

statFields = [ {id: fd.field_id,  label: fd.label, options:fd.options}, ...]

In each statFields, options= [{"label": "Single", "value": "20" },...]


:options="{{row.options}}" <--- SYNTAX?  V-BIND (colon)
  Errors compiling template:
  invalid expression: Unexpected token { in
    {{row.options}}
  Raw expression: :options="{{row.options}}"
	
options="{{row.options}}" <--- SYNTAX? NO VBIND (colon)
  Errors compiling template:
  options="{{row.options}}": 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">.
	

Hope this is clear to a guru.
I have an array of fields (v-for row) , each is a q-select.

How d I get the options into the q-select? (row.options)?

Thanks in advance.

[Vue warn]: Error compiling template:

invalid expression: Invalid or unexpected token in

    [{"id":6,"name":"aaa","created_at":"2019-12-05

  Raw expression: :companies="[{"id":6,"name":"aaa","created_at":"2019-12-05"


153|                      <!-- Page Content -->
154|  
155|      <company_index :companies="[{&quot;id&quot;:6,&quot;name&quot;:&quot;aaa&quot;,&quot;created_at&quot;:&quot;2019-12-05" 14:35:38&quot;,&quot;updated_at&quot;:&quot;2019-12-05="" 14:35:38&quot;}]=""></company_index>
   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
156|      <!-- END Page Content -->
157|              </main>

(found in <Root>)

@extends('layouts.backend')

@section('content')
    <!-- Page Content -->

    <company_index :companies={{json_encode($companies)}}></company_index>
    <!-- END Page Content -->
@endsection

1 ответ

Лучший ответ