时间戳

首页 > 解决方案 > Nuxt+VueX 在子组件中存储绑定（通过迭代数组）

arrays - Nuxt+VueX 在子组件中存储绑定（通过迭代数组）

问题描述

抱歉，问题标题的描述性不太好。让我在下面详细描述。

我为数组的每个元素使用了自定义组件 RespCard ($store.state.global.resp.resps)

<RespCard 
  v-for="(resp,i) in $store.state.global.resp.resps"
  :key="i"
  :resp_title="resp.title" :resp_optional_title="resp.additional" :range="resp.range"
  :resp_amount="resp.amount"
/>

RespCard 组件里面有输入框。我想将此输入值绑定到商店的相应元素。

RespCard 组件如下所示

<v-text-field
 v-model="resp_amount"
 v-if="!done"
 class="resp_text_input"
 label="Your Amount?"
 outlined
 dense
 type="number"
></v-text-field>

props:['resp_title','resp_optional_title','range','resp_amount']

但是当我在 chrome devTools 上检查时，当我更改输入框值时，实际存储值不会改变。它建议使用突变功能，但我想知道如何对每个迭代元素使用突变。

能否请您告诉我如何在子组件中绑定 store 的数组值？谢谢

标签： arraysnuxt.jsvuexbindstore

解决方案

推荐阅读