CODEWITHSUNDEEP
vue.jsdata-bindingvue-component
Petur Ulev
Petur Ulev

Reputation: 97

Vuejs dynamic div text

I have a Vue component with some data inside. I also have an element, which is bind to the data inside the script tag of the component. The problem is that, I use another component to push data to this one, so the div should dynamically change when the new data is pushed. However, that does not happen in my case. Although the data (if I console.log it) changes, the div does not dynamically change as well. Here is the code: 

 Main component:
<template>
  <div class="small">
    <div v-text="x">{{x}}</div>
  </div>
</template>

<script>



  export default {
    components: {
      ExternalComponent
    },
    data() {
      return {
        x: 0
      }
    },
    async mounted() {

    },
    methods: {
      receiveData(data) {
        this.x = data;
      }

    }
  }
</script>

<style>
</style>

External component: 
 <template>
      <div class="R">
      </div>
    </template>

    <script>


      import MainComponent from './MainComponent'

      export default {
        components: {
          MainComponent
        },
        data() {
          return {

          }
        },
        async mounted() {

        },
        methods: {
             clickListener() {
                $('.R').on('click', function(event) {
                   MainComponent.methods.receiveData(12)
                });
            }

        }
      }
    </script>

    <style> 
    </style>

Basically, I want that to be pushed and read from the div in the MainComponent each time something is click in the External component ( because different type of data will be sent ).

Upvotes: 0

Views: 2051

Answers (1)

Kremdas
Kremdas

Reputation: 140

You can't pass data between components like that.

For parent -> child communication use props: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

For child -> parent communication use events: https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

For more complex communication you can use vuex

Another option for direct method call on child component is through refs: How to access to a child method from the parent in vue.js

Upvotes: 1

Related Questions