Vue 组件：props 未定义

Question

When I want to get my variables as props from one vue.js file to antoher it won't work. I've seen that this issue is quite common but the answers just don't help me. I can't see what is wrong with my code. Maybe you can have a look at it:

ladedaten.vue: (path: src\components\ladedaten.vue)

<template>
    <div id="Ladedaten">
        <LadevorgangAendern v-bind:preis="preis"/>  
    </div>
</template>

<script>
import LadevorgangAendern from '../pages/LadevorgangAendern.vue'

export default {
    name: 'Ladedaten',
    components: {LadevorgangAendern},
    data() {
        return {
        preis: 15,           

        }
    },  
}
</script>

LadevorgangAendern.vue (path: src\pages\LadevorgangAendern.vue)

<template>
    <!--Stuff here-->
    <p>Preis: {{preis}}</p>
</template>

<script>
//some imports here

export default {
    name: 'LadevorgangAendern',
    props: ['preis'],

    data() {
        return {
            //variables 
        }
    }
}

//more stuff here
</script>

In fact I'm not even sure if components are what I need. I want to store data temporarily so when this works I planned to feed ladedaten.vue with values from another pages-file again with props. In the end I need these values temporarily and changeable. I also thought of sessions but I wanted to try it with components first. What do you guys think?

Answer 1

in LadevorgangAendern.vue, try

<p>Preis: {{ this.preis }}</p>

Perhaps try including vuex state management in your application. Depending on how often or where you want to access your data, its a great way to create a single state throughout the app without having to continually pass props down or emit them back up or using an event bus.

https://vuex.vuejs.org/