VueJS - Updating variable in another vue

Question

I have a vue, which uses an accordion table that displays the data when a particular row is selected. There is a button "Edit" which hides the data and shows a form.

The form is in another vue (to separate them out out..) The form is showing on clicking the button, however, inside the form I have another button "Save" which calls an ajax request, then hides the form and shows the data.

The problem I'm having is that I cannot seem to figure out how I can update the variable inside the first vue from the second vue. I could use the store but this is not an option as it would update for everyone, whereas it should only update for the particular user.

Enquiries vue: (HTML)

<tr v-if="row.id in expanded">
  <td :colspan="9" style="background-color: #F0FFFF;">
  <div class="accordian-body">
     <div v-if="editing != false">
        <enquiries-view-edit></enquiries-view-edit>
      </div>

     <div v-else>
       <div class="container">
          <div class="pull-right">
              <button type="button" class="btn btn-primary btn-md" @click="editing = !editing">Edit</button>
           </div>
       </div>
      </div>
    </div>
  </td>
</tr> 

Javascript:

export default {

      components: {
          Multiselect
      },

      data() {
          return {
              msg: 'This is just an estimation!',
              tooltip: {
                  actual_price: 'Click on the price to edit it.'
              },
              expanded: {},
              replacedCounter: 0,
              theModel: [],
              enquiry: [],
              center: {lat: 53.068165, lng: -4.076803},
              markers: [],
              needsAlerting: false,
              editing: false
          }
      },
  } 

Inside EnquiriesVue I have:

export default {


    props: ['editing'],

    computed: {

        editing: function {
            console.log("Computed the value");
        }

    }
}

I have tried to compute the value, but this is not doing anything inside the console.

EDIT:

Basically, inside enquiries-view-edit I want a button where you click on it, and it updates the variable editing inside the Enquiries vue so that the form hides and the data vue is then shown.

Answer 1

A child component can communicate with its parent by emitting events. Like this:

export default {        
    props: ['editing'],    
    methods: {
        onClick: function {
            console.log("Clicked on child!");
            this.$emit('stop-editing');
        }    
    }
}

This assumes you have something like this in your child component's template:

<button @click="onClick">Stop editing</button>

You could then "listen" to that event from the parent component as you would any other native event, by registering a handler when including the child component.

<enquiries-view-edit @stop-editing="editing = !editing"></enquiries-view-edit>

Obviously this is a very simple example. You can also pass data along with your emitted event for more complex scenarios.