1

以下代码有效：

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

1 回答 1

3

Vue 将允许您创建与文字数字的绑定：

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

但是如果你绑定到文本，它需要是一个变量：

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

以下不是 JavaScript 中的有效变量名，因为它以数字开头：

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

您可能不是要创建绑定，因此请执行以下操作：

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

（去掉:绑定）

于 2020-04-25T08:22:56.107 回答