v-ons-popover not showing

[Adi Abdullah]

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

[Fran Diox]

@Adi-Abdullah Are you using vue@2.3.0 and vue-onsenui@2.0.0-beta.4? In general, a popover should be placed on a v-ons-page, not on a v-ons-toolbar. However, I think that should still work after beta.4.

[Adi Abdullah]

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>

[Fran Diox]

@Adi-Abdullah Something like this?

[Adi Abdullah]

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?

[Fran Diox]

@Adi-Abdullah The Theme Roller is only valid for versions up to 2.1.0. After that, the core CSS changed and there is a new local tool for generating themes. When you install Onsen UI (npm install onsenui) you can find this tool in node_modules/onsenui/css-components-src.