Bootstrap Vue - 将卡片数据作为有效负载传递答案

【问题标题】：Bootstrap Vue - Passing Card Data as a payloadBootstrap Vue - 将卡片数据作为有效负载传递
【发布时间】：2018-12-18 00:09:05
【问题描述】：

在使用 bootstrap vue 时，是否有类似的方式来传递类似于 rowData 的卡片数据？

我正在使用此功能将卡片数据提交到状态，它似乎不起作用。我正在使用类似的方法来传递 rowData，它工作正常。

卡数据

行动...

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.js vuex bootstrap-vue

【解决方案1】：

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

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时添加:key

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

【讨论】：