Posts made by Adi Abdullah

Hi, is there any example that I can refer to for this?

I’m trying to access the window.monaca in my app but it kept saying it’s undefined. I’m fairly new to this.

Im currently using aws cognito for my auth and considering using other aws services for my app. I want to know what is the best way to store my api keys safely and not hardcoding it in my project. How to do it? Are there any reference sources I can refer to?

Yeah, just like that. I found out that it’s my fault . Here’s my main.js

import './css/fonts.css';
// Onsen UI Styling and Icons
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
//Custom theme
// import './css/onsenui/onsen-css-components.css';

I was using a custom theme I created using the theme roller, when I commented that out, it was working. Maybe it just ain’t showing just now. lol my bad. Althought its weird that using the custom theme made it non existent :laughing: .

Edit:
Tested with a newly created theme, seems like the toolbar is referenced as navigation-bar in theme roller. Maybe this made it so it’s not working?

I’m using currently using these:

• onsenui@2.2.6
• vue@2.3.0
• vue-onsenui@2.0.0-beta.4

@Fran-Diox said:

However, I think that should still work after beta.4.

I can’t seem to get it working. Is there anyway for me to do this? I want to put them together because it’s part of the toolbar component. I even tried adding v-ons-page to the component haha

  <v-ons-page>
    <v-ons-toolbar class="app-toolbar">
      <div class="left" v-if="back">
        <v-ons-back-button>{{backLabel}}</v-ons-back-button>
      </div>
      <div class="center">{{title}}</div>
      <div class="right">
        <v-ons-toolbar-button @click="togglePopover($event)">
          <v-ons-icon icon="bars" ></v-ons-icon>
        </v-ons-toolbar-button>
      </div>
    </v-ons-toolbar>
    <v-ons-popover cancelable
      :visible.sync="popoverVisible"
      :target="popoverTarget"
      direction="down"
    >
      <p style="text-align: center">Lorem ipsum</p>
    </v-ons-popover>
  </v-ons-page>

Hi, I’m trying to make this code works but it doesn’t. It only shows the popover overlay and not the popover itself. I’m trying to create a toolbar component with a popover under the toolbar button like in the official example

<template>
  <v-ons-toolbar class="app-toolbar">
    <div class="left" v-if="back">
      <v-ons-back-button>{{backLabel}}</v-ons-back-button>
    </div>
    <div class="center">{{title}}</div>
    <div class="right">
      <v-ons-toolbar-button @click="togglePopover($event)">
        <v-ons-icon icon="bars" ></v-ons-icon>
      </v-ons-toolbar-button>
    </div>
    <v-ons-popover cancelable
      :visible.sync="popoverVisible"
      :target="popoverTarget"
      direction="down"
    >
      <p style="text-align: center">Lorem ipsum</p>
    </v-ons-popover>
  </v-ons-toolbar>
</template>

<script>
export default {
  props: {
    back: {
      type: Boolean,
      required: false,
      default: false
    },
    backLabel: {
      type: String,
      required: false,
      default: ''
    },
    title: {
      type: String,
      required: true
    }
  },
  data(){
    return{
      popoverVisible: false,
      popoverTarget: null
    }
  },
  methods: {
    togglePopover(event) {
      this.popoverTarget = event;
      this.popoverVisible = !this.popoverVisible;
    }
  }
}
</script>

I tried this for 2 hours now and still scratching my head thinking what I did wrong :confused: . Please help

Thanks so much @Fran-Diox on the fast response :+1: :+1: Just tested, its working now :relaxed:

@Fran-Diox Are there any temporary solution for this? Or I can expect a patch up for this soon? :confused: Plus do I need to create an issue for this ? I’m quite new so bear with me on this haha

Hi, I’m trying to make my app get to the previous page using the android button and not the v-ons-back-button but it doesn’t seem to work. Is there something I missed out on?

Currently I got a message saying ‘Uncaught ReferenceError: Symbol is not defined’ in the console when pressing the back button on my phone.

I’m using :

• onsenui@2.2.5
• vue@2.3.0
• vue-onsenui@2.0.0-beta.3