Not working v-model

Ionic Framework Ionic Vue
1

I want to use v-model in serarch bar.
How should I use it?

<template>
  <ion-modal :is-Open="isOpen" >
    <ion-page>
      <ion-header>
        <ion-toolbar>
          <!-- <ion-title>{{ data }}</ion-title> -->
          <ion-buttons slot="end">
            <ion-button @click="closeModal()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <!-- Animated Searchbar -->
      <ion-searchbar animated :value="searchQuery" inputmode="text">
      </ion-searchbar>
      {{ searchQuery }}
      
      <ion-list>
          <ion-radio-group value="grape" v-for="item in items" :key="item[0]">
            <ion-item>
              <ion-label> {{ item[0] }} </ion-label>
              <ion-radio slot="start" color="success" value="apple"></ion-radio>
              <div>슬둯 수</div>
            </ion-item>
          </ion-radio-group>
      </ion-list>
      
    </ion-page>
  </ion-modal>
      
</template>

<script lang>
import { modalController, IonModal, IonSearchbar } from '@ionic/vue';
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name:'Choice',
  components:{IonModal, IonSearchbar},
  props: {
    data : { type: Object },
    names: { type: String, default: 'μ‹€νŒ¨ν•˜μ…¨μŠ΅λ‹ˆλ‹€.'},
    isOpen: { default: false, required: true },
  },
  setup(props, ctx){
    const modalSave = () => {
      console.log('이거 싀행됨');
      console.log(ctx.emit);modalController.dismiss();
    }
    const closeModal = () => {
      console.log('close 싀행됨');
      modalController.dismiss();
      ctx.emit('close', true);
    }

    const searchQuery = '';
    const items = computed( () => {
      if(searchQuery != ""){
        return Object.values(props.data).map((value) => [value]).filter( v =>
          v[0].includes(searchQuery) );
      } else {
        return props.data.arms;
      }
    })
    return { closeModal, modalSave, searchQuery, items };
  }
});
</script>
2 
<!-- in template -->
<ion-searchbar animated v-model="searchQuery" inputmode="text">
</ion-searchbar>

 // in setup
const searchQuery = ref<any>(null);
1 Like
3

Thank you! It’s working!