H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示

clipboard.png
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件);
上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表,
template中:

<transactionList :list="transactionList"></transactionList>

js中:

data () {
    return {
      transactionList: [...]
    }
}

子组件通过 props 接受一个 list 显示出来没有问题。
但是,问题是,现在这些数据我通过 axios 取得:

methods: {
    getTransData () {
      axios.get(httpUrl.getTransData)
      .then(res => {
        console.log(res.data.transData)
        this.transactionList = res.data.transData
      })
      .catch(err => console.log(err))
   }
},
created () {
   this.getTransData()
}

created 的时候把数据获取到,然后赋值给 data 中的 transactionList ,
因为使用了 axios 获取数据,所以 data 中的 transactionList 为空数组:
transactionList: [ ]
但是这样写完之后,页面什么也不显示了,控制台输出之后发现数据也获取到了, 赋值给 this.transactionList 也成功了,但是貌似是没有传到子组件中,这是为什么?


子组件:

<template>
  <div>
    <div class="ui segment"
      v-for="item in items"
      :class="[item.status ? 'green' : 'red']">
      <div class="ui list m-aa">
        <div class="item" :class="[item.status ? 'text-green' : 'text-red']">
          <h3 v-if="item.status">交易金额:{{ item.tstMoney }} 元</h3>
          <h3 v-else>取消消费:{{ item.tstMoney }} 元</h3>
        </div>
        <div class="item m-gray">
          {{ item.tstTime }}
        </div>
      </div>
      <div class="ui list">
        <div class="item">
          消费门店:{{ item.tstAddress }}
        </div>
      </div>
      <div class="ui bulleted list m-gray">
        <div class="item">
          预存支付:{{ item.tstJifen }}
        </div>
        <div class="item">
          积分支付:{{ item.tstYucun }}
        </div>
        <div class="item">
          其他支付:{{ item.tstElse }}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      items: this.list
    }
  }
}
</script>

父组件:

<template>
  <div class="m-bg" style="padding-left: 10px; padding-right: 10px;">
    <transactionList :list="transactionList"></transactionList>
  </div>
</template>

<script>
import transactionList from '../components/transactionList'
import axios from 'axios'
import { httpUrl } from '../../http_url.js'
export default {
  components: {
    transactionList
  },
  data () {
    return {
      transactionList: []
    }
  },
  methods: {
    getTransData () {
      axios.get(httpUrl.getTransData)
      .then(res => {
        // console.log(res.data.transData)
        console.log(this.transactionList)
        this.transactionList = res.data.transData
        console.log(this.transactionList)
        // console.log(this.transactionList)
      })
      .catch(err => console.log(err))
    }
  },
  created () {
    this.getTransData()
  }
}
</script>

回答:

子组件直接 渲染 list 就好了
你这 渲染的是items 不是你传进去的值

v-for=”item in list “

data 可以不要了

回答:

因为进来的时候,你的list默认为空数组,子组件渲染的时候,props的值还没有传输进来,所以item等于空数组,给你两个方法。
1.直接渲染list,不要渲染item
2.建立一个watch,监听list变化,再赋值给item

回答:

console.log(this.transactionList) 有值吗
试试不使用验证

props:['list']

列表渲染用list

回答:

这种问题猜测应该是子组件里面使用数据是问题;

你可以在计算属性中return prop中接收的数据,然后渲染这个计算属性即可。

=—————————-
看到子组件代码了。。
问题就是在data中返回了一个item。给item赋值的时候list是空数组,等list有值的赋值已经结束了。自然不会更新了。连个方案:

1、如上所说用计算属性
2、如果不会修改list,直接操作list即可

回答:

你子组件这么写就相当于:
list = []
item = list
list = [2333]
item 还是指向原来的空数组,并没有更新

回答:

errrredf

本文地址:H5W3 » vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址