Vue - неверный или неожиданный токен

Question

работает следующий код:

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

и это не так:

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

это сообщение, которое я получаю:

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>)

и это мое реквизиты:

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

что я делаю не так?

РЕДАКТИРОВАТЬ:

Я пытался, и если я ввожу число, это работает .. поэтому я попробовал это:

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

но все же, не повезло.

вот мой текущий VUE файл:

<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>

Answer 1

Vue позволит вам создать привязку к буквальному числу:

<comp :myprop="1000"></comp>

Но если вы привязываете к тексту, это должна быть переменная:

<comp :myprop="asdf"></comp>

Следующее не является допустимым именем переменной в JavaScript, потому что оно начинается с числа:

<comp :myprop="2AMJJK1"></comp>

Возможно, вы не хотите создавать привязку, поэтому сделайте это:

<draggable-pic ph-code="2AMJJK1"></draggable-pic>

(Снимите : привязку)