main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
import App from './App.vue';
import router from './router/index.js';
import InfiniteLoading from 'v3-infinite-loading';
import 'v3-infinite-loading/lib/style.css';
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
Framework7.use(Framework7Vue);
import 'framework7/css/bundle';
const pinia = createPinia();
pinia.use(piniaPersist);
const app = createApp(App);
// Framework7 컴포넌트를 전역적으로 등록
registerComponents(app);
app.component('InfiniteLoading', InfiniteLoading);
app.use(pinia);
app.use(router);
app.mount('#app');
actionView.vue
<script setup>
import { ref } from 'vue';
import {
f7Page,
f7Button,
f7Actions,
f7ActionsGroup,
f7ActionsButton,
} from 'framework7-vue';
const state = ref({
isActionsOpened: false,
});
// 상태 정의
// 이벤트 핸들러 정의
const openActions = () => {
state.value.isActionsOpened = !state.value.isActionsOpened;
};
const actionClicked = event => {
console.log('Action clicked:', event.target.innerText);
state.value.isActionsOpened = false;
};
</script>
<template>
<div style="padding-top: 200px">
<f7-page>
<f7-button style="color: red" @click="openActions"
>Open Action Sheet</f7-button
>
{{ state.isActionsOpened }}
<f7-actions v-model:opened="state.isActionsOpened">
<f7-actions-group>
<f7-actions-button @click="actionClicked">Option 1</f7-actions-button>
<f7-actions-button @click="actionClicked">Option 2</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button color="red" @click="actionClicked"
>Cancel</f7-actions-button
>
</f7-actions-group>
</f7-actions>
</f7-page>
</div>
</template>
The ‘state’ changes, but the ‘modal-in’ class is not added, and it does not work. Could you please tell me what is wrong?