javascript - 如何从 data() vue.js 的两个不同数组中显示 v-for

Question

<ul class="chart-box__info-chartlist">
   <li v-for="item in datachart.labels">
       <i class="chart-icon chart-icon_1"></i>
       <span>{{ item.label }} - {{ item.color }}</span> 
   </li>
</ul>  

data() {
            return {
                cb_info_sm: this.links[0].cb_info_sm,
                cb_info_sm_color: this.links[0].cb_info_sm_color,
                cb_info_label: this.links[0].cb_info_label,
                cb_info_url: this.links[0].cb_info_url,
                activeclass: 0,
                datachart: {
                    labels: this.links[0].data_lables.map( item => item.title),
                    datasets: [{
                        label: 'Chart',
                        backgroundColor: this.links[0].data_lables.map( item => item.color),
                        data: this.links[0].data_lables.map( item => item.value),
                        borderColor: '#ffffff'
                    }]
                }
            }
        },

数据正在动态变化，我需要显示 datachart.datasets[0].backgroundColor 中的两个值颜色和 datachart.labels 中的标签，也许有人知道，如何用 v-for 做到这一点？

标签： javascriptvue.js

Answer 1

您的代码很脏，我建议重组和清理您的数据图表对象，但如果您坚持保留此对象，那么您可以定义一个计算属性并在其上创建一个 v-for：

computed : {
  newDataChart () {
    return this.datachart.labels.map(item => {label: item, color: this.datachart.datasets[0].backgroundColor})
  }
}