0

My problem is, crud-table component isn't refreshing when i change currentTable. When i assign currentTable = 'doctor' at created () or something. It works, but it isn't here. Why?

<template>
  <div id="adminpanel">
    <div id="tabs">
      <button
        v-for="tableName in tables"
        :key="tableName"
        @click="switchTo(tableName)"
        >{{ tableName }}
      </button>

      <crud-table :tableName="currentTable"/>
    </div>
  </div>
</template>

<script>
import CrudTable from './CrudTable.vue'

export default {
  name: 'AdminPanel',
  data () {
    return {
      tables: ['user', 'doctor'],
      currentTable: 'user'
    }
  },
  methods: {
    switchTo: function (tableName) {
      this.currentTable = tableName
    }
  },
  components: {
    CrudTable
  }
}
</script>

Edit: It's not a duplicate, because I didn't misspelled prop name in any way. And it works, when I set to different initial value.

This is my CrudTable component:

<template>
  <table id="crudtable">
      <tr>
        <th>Akcje</th>
        <th v-for="h in header" :key="h">
          {{ h }}
        </th>
      </tr>
      <tr v-for="row in rows" :key="row.id">
        <td>
          <span class="action edit">E</span>
          <span @click="save(visible(row))" class="action save">S</span>
          <span class="action delete">D</span>
        </td>
        <td v-for="cell in ordered(visible(row))" :key="cell.name">
          <input v-model="cell.value" type="text"/>
        </td>
      </tr>
  </table>
</template>

<script>
import {HTTP} from '../http-common'
import {popUp} from '../utils'

export default {
  name: 'CrudTable',
  props: ['tableName'],
  data () {
    return {
      rows: [],
      header: [],
      chunkSize: 10
    }
  },
  computed: {
    endpoint: function () {
      return `/api/${this.tableName}`
    }
  },
  methods: {
    visible: function (row) {
      let ret = {}
      for (let prop in row) {
        if (!prop.startsWith('_')) {
          ret[prop] = row[prop]
        }
      }
      return ret
    },
    ordered: function (row) {
      let ret = []
      for (let col of this.header) {
        ret.push({name: col, value: row[col]})
      }
      return ret
    },
    fillTable: function () {
      let self = this
      let link = `${this.endpoint}/?page=0&size=100`
      HTTP.get(link)
        .then(function (response) {
          self.rows = response.data
        })
        .catch(function (err) {
          console.log(err.response)
        })
    },
    fillHeader: function () {
      let self = this
      HTTP.get(self.endpoint)
        .then(function (response) {
          self.header = Object.keys(response.data)
        })
        .catch(function (err) {
          console.log(err.response)
        })
    },
    save: function (row) {
      HTTP.patch(this.endpoint, row)
        .then(function (response) {
          popUp('ok', `Zapisano obiekt o id ${row.id}`)
        })
        .catch(function (err) {
          console.log(err.response)
        })
    }
  },
  beforeMount () {
    this.fillTable()
    this.fillHeader()
  }
}
</script>
3
  • @Ginko What do you mean by "refresh"? Can you show the definition of CrudTable and how tableName is used there? Commented Sep 6, 2018 at 6:10
  • Here's a demo of your code with a dummy CrudTable. That's why it's important to see your definition of CrudTable. :) Commented Sep 6, 2018 at 6:16
  • I edited it, could you look once again? Commented Sep 6, 2018 at 13:20

2 Answers 2

1

If I understand correctly, you're wondering why CrudTable.fillTable() is not invoked when there's a change in CrudTable.endpoint (which depends on CrudTable.tableName). The issue is fillTable() is just a method, which is not reactive. fillTable() evaluates endpoint only at the time of call.

If you want fillTable() to be called whenever endpoint changes, you'd need to add a watcher on that:

watch: {
  endpoint(value) { // <-- called when endpoint computed prop changes
    this.fillTable(value);
  }
},
methods: {
  fillTable(endpoint) {
     // http.get(`${endpoint}/users`)
  }
}

demo

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

1 Comment

I admire your knowledge, great wizard. Thanks
0

The likely problem is that you should be using...

<crud-table :table-name="currentTable"/>

instead of...

<crud-table :tableName="currentTable"/>

Properties have to be kabobcase as I recall.

1 Comment

That kebab-case limitation applies only to in-DOM templates, which is not the case here because the OP is using an SFC (transformed by vue-loader into a string template). See Codepen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.