VueJS 1: Trying to pass data from one component to another on button click-CodePudding

Component WarehouseAdd

<el-col :span="4" v-if="isWarehouseReplicate" >
    <button  :disabled = "isApply" @click="onClickApply()"> Apply
        <i ></i>
    </button>
</el-col>
<tableview isVisible="isVisibleTableView"></tableview>

<script>
import tableview from './TableView'
components: {
  tableview
},
data() {
  return {
    isVisibleTableView: false,
  }
},
onClickApply: function () {
  console.log('onclick');
  this.isVisibleTableView = true;
}
}

component Tableview

<template>
  <div  v-if="isVisible">
   // some code
</template>

<script> 
  props: [
   'isVisible']
</script>

Initially isVisibleTableView should be false and on buttton click i want to update the value to true. Here I am trying to show tableview component on Button click but this is not working in my case. I am trying to change the prop in run time. What can I possibly use in order to accomplish ?

CodePudding user response：

You should put your method onClickApply from the parent inside the methods object.

Otherwise, Here, you missed the : here isVisible="isVisibleTableView" so the props was not reactive.

Example :

here the parent has a isVisibleTableView property passed to the child through the show props

Vue.component('child', {
  template: '#child',
  props: ['show'],
});

new Vue({
  el: '#app',
  data: () => ({
    isVisibleTableView: false
  }),
  
  methods: {
    toggleShow(){
      this.isVisibleTableView = !this.isVisibleTableView
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>this is the parent</p>
  <button @click="toggleShow">{{isVisibleTableView ? "Hide child" : "Show child"}}</button>
  <child :show="isVisibleTableView"></child>
</div>

<template id="child">
  <h2 v-if="show">This is the child</h2>    
</template>

CodePudding user response：

Please try to change this:

<tableview isVisible="isVisibleTableView"></tableview>

To This:

<tableview :isVisible="isVisibleTableView"></tableview>

CodePudding user response：

isVisible="!isVisibleTableView"

Sometimes it is necessary to work with negations in templates. See if that works. Hugs.