vue3 input @change="load" 返回数据不更新?

问题

有点奇怪的现象,绑定了 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>
  1. 为何 @change="load" 传入进来的数据是 {isTruest:true}
  2. 当 change之后,load执行了,接收之后,items 数据有改变,但页面没有重新渲染数据。
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题