在v-项目组中使用字符串键作为v-模型。

Question

可以在v-项目组上使用字符串键作为v-模型？

在数据领域我有这样的

    payment: null,
    payments: [
      {
        icon: 'mdi-alpha-p-circle-outline',
        type: 'paypal',
      },
      {
        icon: 'mdi-credit-card-outline',
        type: 'credit',
      },
      {
        icon: 'mdi-cash',
        type: 'cash',
      },
    ],

在模板区域，我有以下内容：

<v-item-group v-model="payment" class="row">
  <v-item v-for="payment in payments" :key="payment.type">
    <template v-slot="{ active, toggle }">
      <v-col class="text-center" cols="4">
        <v-card
          :class="active ? 'success--text' : 'grey--text'"
          class="mb-6 mx-auto pa-10 d-inline-block v-card--account"
          outlined
          @click="toggle"
        >
          <v-icon large v-text="payment.icon" />
        </v-card>

        <div
          class="text-uppercase subtitle-2 text--primary"
          v-text="payment.type"
        />
      </v-col>
    </template>
  </v-item>
</v-item-group>

为了获得这个

​

​

当我选择支付类型时，v模型接受一个数值，例如：

如果选择PayPal，则支付值为0，如果选择信用，则支付值为1&如果ai选择现金，则支付值为2。

​

​

我检查了vue控制台项组id，就可以了。

​

​

如何使用选定项目的payment.type作为v模型？

我会感谢你的帮助。

何塞·罗德里格斯

Answer 1

有很多方法可以更改父级的payment属性的值。您可以编辑toggle方法，以便它更改payment属性。还可以使用event - listener设置payment属性。除非你提供一个片段来玩，这些都是我到目前为止的建议。