Bootstrap Vue-将卡数据作为有效载荷传递 [英] Bootstrap Vue - Passing Card Data as a payload

问题描述

使用bootstrap vue时是否有类似的方式来传递卡片数据(如rowData)?

Is there a similar way to pass card data like rowData when using bootstrap vue?

我正在使用此功能将卡数据提交到状态，但似乎不起作用.我正在使用类似的方法来传递rowData，并且效果很好.

I am using this function to commit card data to the state and it doesn't seem to work. I am using a similar method to pass rowData and it works fine.

卡数据

动作...

setCard: function ({commit}, cardData) {
  commit('setCardToState', cardData)
}

突变...

setCardToState (state, cardData) {
  state.addeditinitiative.name = cardData.name
  state.addeditinitiative.description = cardData.description
  state.addeditinitiative.id = cardData.id
},

模板

<b-card v-for="initiative in initiatives" v-b-modal.NewInitiativeModal @click="setCard">
        {{initiative.name}}
      </b-card>

行数据

模板

<b-table striped
             hover
             responsive
             :items="products"
             :fields="fields"
             :filter="reportFilter"
             :current-page="currentPage"
             :per-page="10"
             v-b-modal.EditProductModal
             @row-clicked="setRow"></b-table>
  </b-row>

动作

 setRow: function ({commit}, rowData) {
  commit('setRowToState', rowData)
},

突变

setRowToState (state, rowData) {
  state.addeditproduct.name = rowData.name
  state.addeditproduct.productline = rowData.productline
  state.addeditproduct.description = rowData.description
  state.addeditproduct.externalid = rowData.externalid
  state.addeditproduct.active = rowData.active
  state.addeditproduct.id = rowData.id
},

推荐答案

可能是Vue反应性问题.您可以使用deepCopy(例如:JSON.parse(JSON.stringify())使其具有反应性

It might be Vue reactivity problem. You can use deepCopy (ex: JSON.parse(JSON.stringify()) to make it reactive

setCardToState (state, cardData) {
  state.addeditinitiative.name = cardData.name
  state.addeditinitiative.description = cardData.description
  state.addeditinitiative.id = cardData.id
  state.addeditinitiative = JSON.parse(JSON.stringify(state.addeditinitiative))
}

顺便说一句，使用v-for

<b-card v-for="(initiative, index) in initiatives" :key="index" v-b-modal.NewInitiativeModal @click="setCard">
        {{initiative.name}}
</b-card>

这篇关于Bootstrap Vue-将卡数据作为有效载荷传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！