Vue: How to update data in another *.vue file?

SchwammdaFunk 0
Viewed 13

I am new in Vue and I try to make a Cookie Clicker Clone. My problem is, I don't know how to update the value from App.vue in Upgrade.vue?

I want to know how the Parent gives data to the Child and the Child updates the data and gives it back to the Parent and also the Child should update himself.

App.vue

<template>
  <div id="clickPower">
    <h1>Click Power: {{summand}}</h1>
  </div>

  <h1 id="clickPoint">{{clickPoint}}</h1>

  <div id="cookie">
    <button @click="clicked">
      <img src="../res/img/Cookie.png" alt="Cookie">
    </button>
  </div>

  <Upgrade />

</template>

<script>
import Upgrade from "./components/Upgrade.vue";

export default {

  name: "App",

  data() {
    return {
      clickPoint: 0,
      summand: 1,
    };
  },

  components: {
    Upgrade,
  },

  methods: {
    clicked() {
      this.clickPoint += this.summand;
    },
  },
};

</script>

<style scoped>
@import './assets/main.css';
</style>

Upgrade.vue

<template>

    <div id="upClickCursor">
        <button @click="upClickCursor">
            <img src="../../res/img/Cursor.png" alt="Cursor">
        </button>

        <p>{{cursorCost}}</p>
    </div>

    <div id="upClickRecept">
        <button @click="upClickRecept">
            <img src="../../res/img/Recept.png" alt="Recept">
        </button>

        <p>{{receptCost}}</p>
    </div>

</template>

<script>
import App from "../App.vue";

export default {
    name: "Upgrade",

    data() {
        return {
            cursorCost: 10,
            receptCost: 20,
        };
    },

    // The methods are not working.
    methods: {
        upClickCursor() {
            if (App.clickPoint >= this.cursorCost) {
                App.clickPoint -= this.cursorCost;
                App.summand += 1;
                this.cursorCost += 15;
            }
        },

        upClickRecept() {
            if (App.clickPoint >= this.receptCost) {
                App.clickPoint -= this.receptCost;
                App.summand += 3;
                this.receptCost += 25;
            }
        }
    },
};
</script>

<style scoped>
@import '../assets/Upgrade.css';
</style>
vue.js
1 Answers

You have to use props feature to pass data from Parent component to Child one. To pass data from Child to Parent you can simply use events.

Example:

<template>
  <div id="clickPower">
    <h1>Click Power: {{summand}}</h1>
  </div>

  <h1 id="clickPoint">{{clickPoint}}</h1>

  <div id="cookie">
    <button @click="clicked">
      <img src="../res/img/Cookie.png" alt="Cookie">
    </button>
  </div>

  <Upgrade clickCount="clickPoint" @update="updateClicks" />

</template>

<script>
import Upgrade from "./components/Upgrade.vue";

export default {

  name: "App",

  data() {
    return {
      clickPoint: 0,
      summand: 1,
    };
  },

  components: {
    Upgrade,
  },

  methods: {
    clicked() {
      this.clickPoint += this.summand;
    },
    updateClicks(cursorCost) {
      this.clickPoint -= this.cursorCost;
      this.summand += 1;
    }
  },
};

</script>

<style scoped>
@import './assets/main.css';
</style>

Upgrade component

<template>

    <div id="upClickCursor">
        <button @click="upClickCursor">
            <img src="../../res/img/Cursor.png" alt="Cursor">
        </button>

        <p>{{cursorCost}}</p>
    </div>

    <div id="upClickRecept">
        <button @click="upClickRecept">
            <img src="../../res/img/Recept.png" alt="Recept">
        </button>

        <p>{{receptCost}}</p>
    </div>

</template>

<script>
export default {
    name: "Upgrade",

    data() {
        return {
            cursorCost: 10,
            receptCost: 20,
        };
    },
    props: {
        clickCount: Number
    },

    // The methods are not working.
    methods: {
        upClickCursor() {
            if (this.clickPoint >= this.cursorCost) {
                this.$emit('update', this.cursorCost);
                this.cursorCost += 15;
            }
        },

        upClickRecept() {
            // same way as above
        }
    },
};
</script>

<style scoped>
@import '../assets/Upgrade.css';
</style>
Dmitry Pliusnin0
Related