Vue - Unable to use variable in template

Question

I have this code in my VUE file:

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

in the template, photo.filename works, but this.galCode throws these two errors:

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

The variable contains a value, as i am printing it to console. What am I doing wrong?

Emmanuel Ogoma · Accepted Answer · 2020-04-25 09:32:19Z

2

The line {{ this.galCode }}{{ photo.filename }} should be {{ galCode }}{{ photo.filename }}. Your problem is the this you added

answered Apr 25, 2020 at 9:32

Emmanuel Ogoma

6826 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

balzacLeGeek · Accepted Answer · 2020-04-25 09:13:14Z

1

The problem is that you try to access props variable directly from your template. To solve this, initalize a state variable (under data {}) Within props value as default like you did With picsNeW. another remark, avoid to use "this" from template, you should access directly datas form its name. Use default value in your props, this is recommended :)

edited Apr 25, 2020 at 9:13

answered Apr 25, 2020 at 9:10

balzacLeGeek

8255 silver badges7 bronze badges

1 Comment

sharkyenergy Over a year ago

you mean like the picsNew variable?

Mohsen · Accepted Answer · 2020-04-25 09:34:21Z

1

First you should define Default value as :

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

Second be sure you receive desired data, specially in nested object you should check the object defined to prevent receive undefined property error, like use 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>

answered Apr 25, 2020 at 9:34

Mohsen

4,2451 gold badge34 silver badges33 bronze badges

Collectives™ on Stack Overflow

Vue - Unable to use variable in template

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related