Блог

Я использую 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 тег in, то все переключатели проверяются

Я подумал, что v-model это сработает, только если вы добавите v-model in ion-radio-group , а не in 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);
    }
  }
 

Я не знаю ionic framework, но я думаю, что вижу вашу проблему. Вам необходимо привязать свое значение <ion-radio slot="start" :value="size.size.id"></ion-radio> к свойству данных следующим образом: <ion-radio slot="start" v-model="size.size.id"></ion-radio> и

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

Ключевым моментом здесь является наличие начального значения, указанного ionic framework. Я просто добавил пустую строку. Вы также должны установить начальное значение для переключателя следующим образом:

Затем в вашем методе вы можете просто получить доступ к значению:

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