javascript - 如何在 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-model在 ion-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);
    }
  }