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.