我的问题是,当我更改 currentTable
时,crud-table 组件不会刷新。当我在 created ()
或其他地方分配 currentTable = 'doctor'
时。它有效,但不在这里。为什么?
<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>
编辑: 它不是重复的,因为我没有以任何方式拼错 Prop 名称。当我设置不同的初始值时,它起作用了。
这是我的 CrudTable 组件:
<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>
最佳答案
如果我理解正确,您会想知道为什么当 CrudTable.endpoint
发生更改时不调用 CrudTable.fillTable()
(这取决于 CrudTable.tableName
)。问题是 fillTable() 只是一个方法,不是 react 性的。 fillTable()
仅在调用时评估 endpoint
。
如果您希望在 endpoint
更改时调用 fillTable()
,则需要添加 watcher对此:
watch: {
endpoint(value) { // <-- called when endpoint computed prop changes
this.fillTable(value);
}
},
methods: {
fillTable(endpoint) {
// http.get(`${endpoint}/users`)
}
}
关于javascript - 属性更改时组件不会刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52194767/