no modal
in modal
Tab2 code
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-searchbar animated v-model="searchQuery" inputmode="text">
</ion-searchbar>
<input v-model="searchQuery" />
{{ test }}
<ExploreContainer name="Tab 2 page" />
</ion-content>
</ion-page>
</template>
<script lang>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar } from '@ionic/vue';
import arms from '@/data/arms.json';
import ExploreContainer from '@/components/ExploreContainer.vue';
const lists = Object.values(arms.arms).map((value) => [value])
console.log( "테스트 " + lists[0])
export default {
name: 'Tab2',
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage,IonSearchbar },
data () {
return {
searchQuery: '',
}
},
computed: {
test() {
if(this.searchQuery == '') return lists
else return lists.filter( i => i[0][0].includes(this.searchQuery) )
}
}
}
</script>
modal code
<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 v-model="searchQuery" inputmode="text">
</ion-searchbar>
<input v-model="searchQuery" />
<!-- <ion-searchbar animated v-model="searchQuery" inputmode="text">
</ion-searchbar> -->
<ion-button>{{ searchQuery }}</ion-button>
{{ test }}
<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 >
import { modalController, IonModal, IonSearchbar, IonButton } from '@ionic/vue';
import { defineComponent, computed, ref, reactive } from 'vue';
import arms from '@/data/arms.json';
const lists = Object.values(arms.arms).map((value) => [value])
console.log( "테스트 " + lists[0])
export default defineComponent({
name:'Choice',
components:{IonModal, IonSearchbar, IonButton},
props: {
data : { type: Object },
names: { type: String, default: '실패하셨습니다.'},
isOpen: { default: false, required: true },
},
data () {
return {
searchQuery: '',
}
},
computed: {
test() {
if(this.searchQuery == '') return lists
else return lists.filter( i => i[0][0].includes(this.searchQuery) )
}
},
// 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 = ref('');
// const items = computed( () => {
// if(searchQuery.value != ""){
// return Object.values(props.data).map((value) => [value]).filter( v =>
// v[0].includes(searchQuery.value) );
// } else {
// return props.data.arms;
// }
// })
// const v = reactive({ count:0 });
// return { closeModal, modalSave, searchQuery, items, v};
// },
});
</script>
I don’t know why it doesn’t work in modal.