Emmiting Data from one component to another Vuejs

Question

this is my Table component.

<b-table
    class="table table-striped"
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      :fields="fields"
      @row-clicked="test"
      lg
    ></b-table>

method on the same component:

methods: {
    test(){
        console.log('test')
        this.$emit('rowClick',"heyoooooooo")
    }
},

parent component:

    <ClientTable :fields="fields" :items="rows" :sortBy="sortBy" :sortDesc="sortDesc" @rowClicked="Callme()"/>

parent method:

methods: {
    Callme(e){
        console.log('hee')
    }
},

I'm really new with VueJS and I stumbled with Emit I was wondering why is my code not working, does not console anything.

thanks

Your table component emits rowClick but your parent component subscribes to @rowClicked. — A1rPun
– A1rPun, Commented Aug 15, 2019 at 23:40
hi sir, tried it, but didnt work this.$emit('rowClicked',"heyoooooooo") also added () on test — c j
– c j, Commented Aug 15, 2019 at 23:47
Usually I remove the (). Are you using bootstrap vue b-table? Try @row-clicked on your parent component (kebab-case event names) — A1rPun
– A1rPun, Commented Aug 15, 2019 at 23:58
yes, I'm using bootstrap vue table and I want to make rows clickable, the @row-click wont work, changed the emit to row-clicked too — c j
– c j, Commented Aug 16, 2019 at 0:05

Christian Carrillo · Accepted Answer · 2019-08-16 00:43:59Z

1

I recreate your question and it's works well.

Vue.config.devtools = false
Vue.config.productionTip = false

Vue.component('client-table', {
  props: ['items'],
  methods: {
    test(){
      this.$emit('row-clicked',"heyoooooooo")
    }  
  },
  template: `
    <b-table
      class="table table-striped"
      :items="items"            
      lg
      @row-clicked="test"
    ></b-table>
  `
})

new Vue({
  el: "#app",
  data: {
    rows: [
      { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' },
      { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' },
      { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' },
    ]
  },  
  methods: {
  	Callme (e) {
       console.log(e)
    }
  }
})

<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
  />
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
  />

<div id="app">
  <client-table 
    :items="rows"
    @row-clicked="Callme">
  </client-table>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
 <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

edited Aug 16, 2019 at 0:43

answered Aug 15, 2019 at 23:59

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

c j Over a year ago

I tried this too. didn't work. with and without () also

A1rPun Over a year ago

@cj What didn't work? Nothing to console? Nothing rendered on screen? We need more context

c j Over a year ago

Hi A1rPun, thanks for the response. It works now. I think the problem was when I git checkout it didn't update my base fille i need to npm run serve it again

Collectives™ on Stack Overflow

Emmiting Data from one component to another Vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related