问题
有点奇怪的现象,绑定了 input 的 @change="load"
,load方法执行了,但对应的items 没有创新渲染。
# components/List.vue
<template>
<div class="">
<form action="">
<input type="text" name="now_price" v-model="now_price" @change="load">
</form>
</div>
<div class="">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">时间</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.id }}</td>
<td>{{ item.trans_at }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: ['code', 'price'],
setup(props) {
const page = ref(0)
const code = ref(props.code)
const items = ref([])
const now_price = ref('')
const load = async (n) => {
console.log('load n = ', n,typeof n)
page.value = n || 1
if(typeof page.value == "object") {
page.value = 1
}
await axios.get('/stock/' + code.value + '/transactions',{
params: {
now_price: now_price.value,
page: page.value,
}
}).then((resp) => {
console.log('load resp = ', resp)
if (resp.data.code === 0) {
error.value = ''
items.value = resp.data.data.items
} else {
error.value = resp.data.msg
}
}).catch((err) => {
console.log('load err = ', err)
error.value = err
})
watchEffect(() => {
price.value = props.price
})
onBeforeMount(async () => {
await load()
})
return {items, code, load, now_price, page}
}
</script>
- 为何
@change="load"
传入进来的数据是{isTruest:true}
- 当 change之后,load执行了,接收之后,items 数据有改变,但页面没有重新渲染数据。