Vue - 无法在模板中使用变量。

Question

我的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>
                        {{ this.galCode }}{{ photo.filename }}
                    </header>
                </article>
            </draggable>
        </section>
    </div>
</div>
</template>

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

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


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

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


            let photos = this.picsNew;

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

    }
}
</script>

在模板中，photo.filename可以用，但this.galCode却出现了两个错误。

app.js:44152 [Vue warn]: Error in render: "TypeError: Cannot read property 'galCode' of undefined"

found in

 ---> <DraggablePic> at resources/js/components/draggablepic.vue

app.js:45415 TypeError: Cannot read property 'galCode' of undefined

变量包含了一个值，因为我把它打印到了控制台。我到底做错了什么？

Answer 1

问题是你试图直接从模板中访问道具变量。为了解决这个问题，在props值中初始化一个状态变量(在data {}下)，就像你做的那样，将其作为默认值。picsNeW.还有一点，避免在模板中使用 "this"，你应该直接从它的名称中访问数据。在你的道具中使用默认值，建议这样做:)

Answer 2

这一行 {{ this.galCode }}{{ photo.filename }} 应是 {{ galCode }}{{ photo.filename }}. 你的问题是... this 你加

Answer 3

首先，你应该将默认值定义为.NET Framework 2.0。

  props: {
    name: {
      type: String,
      default: 'default'
    },
    ...
    galCode: {
      type: Number,
      default: 0
    },
  },

第二，确保你能接收到所需的数据，特别是在嵌套对象中，你应该检查对象的定义，以防止接收未定义的属性错误，如使用 v-if :

<header>
    <template v-if="galCode">{{ galCode }}</template>    // can use v-else here too print default value
    <template v-if="photo.filename"> {{ photo.filename }}</template>

</header>