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

Question

我在 vuejs 中使用 ionic 框架。

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

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

如何访问使用 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 标签，我无法添加它。

如果我在 ion-radio 标签中添加了 v-model 那么所有的单选按钮都会被选中

Answer 1

我不知道离子框架，但我想我可以看到你的问题。你需要将你的<ion-radio slot="start" :value="size.size.id"></ion-radio>的值绑定到data-属性，如下：<ion-radio slot="start" v-model="size.size.id"></ion-radio>和

  data() {
    return {
      size: {
        size: {
          id: ''
        },
      },
    };
  },

这里的关键是要有一个由离子框架指定的初始值。我刚刚添加了一个空字符串。您还应该为单选按钮设置一个初始值，如下所示：

在您的方法中，您可以访问值：

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

Answer 2

我认为只有在 ion-radio-group 而不是 ion-radio 中添加 v-model 时 v-model 才有效。

解决方法如下：

在ion-radio-group

中添加v-model

<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);
    }
  }

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

How to get ion-radio value in vue js - ionic

javascript

vue.js

ionic-framework

ionic4