如何在 vue js 中获取 ion-radio 值 - ionic

Question

我ionic在vuejs.

我创建了一个产品页面，但其中不包含任何表单。

页面中有一个单选按钮，其中包含产品的尺寸。

如何访问的单选按钮与创建选定值ion-radio 时，add to cart从该页面按下按钮。

我是新手vue.js。通常我使用以下方法在 jQuery 中获取值：

$('input[name=radioName]:checked').val()

如何在vuejs??? 中获取选定的单选按钮值

这是html部分：

<ion-list v-if="product.size_maps">
  <ion-radio-group>
    <ion-row>
      <ion-col
        v-for="size in product.size_maps"
        :key="size.id"
        size="6"
        id="product_size"
      >
        <ion-item>
          <ion-label class="ion-no-margin">
            {{ size.size.text }}
          </ion-label>
          <ion-radio slot="start" :value="size.size.id"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-radio-group>
</ion-list>

我创建了一个名为的方法addToCart：

  methods: {
    addToCart(event) {
      console.log(event);
      // get radio button value here
    }
  }

这是我在按钮中调用 addToCart 函数的方式

<ion-button
  color="primary"
  fill="solid"
  expand="block"
  size="default"
  v-on:click="addToCart"
>
  Add To Cart
</ion-button>

编辑：

我试图用来v-model获取数据。但由于没有input可用的标签，我无法添加。

如果我添加了v-modelinion-radio标签，那么所有的单选按钮都会被检查

Answer 1

我想，v-model只会工作，如果你添加v-model的ion-radio-group不是ion-radio。

这是解决方案：

添加v-model在ion-radio-group

<ion-list v-if="product.size_maps">
  <ion-radio-group v-model="selected_size"> <!-- notice the v-model here -->
    <ion-row>
      <ion-col
        v-for="size in product.size_maps"
        :key="size.id"
        size="6"
        id="product_size"
      >
        <ion-item>
          <ion-label class="ion-no-margin">
            {{ size.size.text }}
          </ion-label>
          <ion-radio slot="start" :value="size.size.id"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-radio-group>
</ion-list>

然后添加selected_size数据：

  data() {
    return {
      ...
      selected_size: 0
    };
  }

然后在方法中像往常一样访问这个 selected_size

  methods: {
    addToCart(event) {
      console.log(event);
      // get radio button value here
      console.log(this.selected_size);
    }
  }