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

Строка {{ this.galCode }}{{ photo.filename }} должна быть {{ galCode }}{{ photo.filename }}. Ваша проблема this, которую вы добавили

Answer 2

Во-первых, вы должны определить значение по умолчанию как:

  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>

Answer 3

Проблема в том, что вы пытаетесь получить доступ к переменной props прямо из вашего шаблона. Чтобы решить эту проблему, инициализируйте переменную состояния (под data {}) в значении props по умолчанию, как вы сделали с picsNeW. Еще одно замечание, избегайте использования «this» из шаблона, вы должны напрямую обращаться к данным из его имени. Используйте значение по умолчанию в ваших реквизитах, это рекомендуется:)