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>

（删除 : 绑定）

Vue - 无效或意外的令牌

Vue - Invalid or unexpected Token

token

vue.js

unexpected-token

vue-props