Javascript 组件不会在属性更改时刷新
我的问题是,当我更改currentTable时,crud表组件并没有刷新。当我将currentTable赋值为'doctor'时。它能工作,但它不在这里。为什么?Javascript 组件不会在属性更改时刷新,javascript,vue.js,frontend,Javascript,Vue.js,Frontend,我的问题是,当我更改currentTable时,crud表组件并没有刷新。当我将currentTable赋值为'doctor'时。它能工作,但它不在这里。为什么? <template> <div id="adminpanel"> <div id="tabs"> <button v-for="tableName in tables" :key="tableName" @click="s
<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>
编辑:
它不是重复的,因为我没有以任何方式拼错道具名称。当我设置不同的初始值时,它就工作了
这是我的可损坏组件:
<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>
可能的问题是您应该使用
<crud-table :table-name="currentTable"/>
而不是
<crud-table :tableName="currentTable"/>
我记得属性必须是kabobcase。如果我理解正确,您可能会想,当依赖于CrudTable.tableName的CrudTable.endpoint发生更改时,为什么不调用CrudTable.fillTable。问题是fillTable只是一种方法,它不是被动的。fillTable仅在调用时计算端点 如果希望在端点更改时调用fillTable,则需要在其上添加一个:
kebab大小写限制仅适用于DOM中的模板,这里的情况并非如此,因为OP使用的是由vue加载程序转换为字符串模板的SFC。看。@Ginko你说的刷新是什么意思?你能展示一下CrudTable的定义以及tableName是如何使用的吗?下面是一段使用伪CrudTable的代码。这就是为什么了解您对可积垢的定义很重要的原因:我编辑过,你能再看一遍吗?我很佩服你的知识,伟大的巫师。谢谢
watch: {
endpoint(value) { // <-- called when endpoint computed prop changes
this.fillTable(value);
}
},
methods: {
fillTable(endpoint) {
// http.get(`${endpoint}/users`)
}
}