We have an Ionic-Vue App (Ionic 6 and Vue 3) and try to open an IonSelect programmatically. We tried using a ref like this:
<ion-select ref="mySelect" placeholder="something" v-model="selectedIndex">
<ion-select-option :value="1">One</ion-select-option>
<ion-select-option :value="2">Two</ion-select-option>
</ion-select>
and we can indeed access it like this:
myMethod(){
console.log(this.$refs.mySelect);
}
but we cannot figure out any way to open it. According to the ionic documentation [1] there should be an open() method, but
this.$refs.mySelect.open()
crashes with "... is not a function" so this does not seem to cut it. Any help is appreciated.
[1] https://ionicframework.com/docs/api/select#methods
UPDATE:
Found it. In case someone is looking for this, access the ion-select via
this.$refs.mySelect.$el.open();
Related
I have some extensions code in extension.ts
const item = vscode.window.createStatusBarItem(
vscode.StatusBarAlignment.Right
);
item.command = "codevids-auth.pushToWebview";
item.text = "$(record) codevid";
item.show();
I can't figure out how to place the statusBatItem in automatically without having to fire the command. Is this possible since some plugins as soon as they are installed they show up in the statusbar. I would like to know how to do this.
Thanks for the help ahead of time. And please let me know if you need more details I am happy to explain further.
It sounds like you may not be using an activationEvent which would trigger your extension's activate function immediately after startup is finished. Try this:
"activationEvents": [ "onStartupFinished" ]
Then your code, which includes .show(), should be sufficient to show the StatusBarItem soon after vscode is reloaded or started. It is typical that installation of an extension is not enough to activate it, the user should get a badge on the Extension view that reload is required. If that is what you are trying to avoid, I don't think it is possible.
When running gridsome build I get window is not defined. Anyone has an example of making vue2-leaflet work with the client only option for gridsome?
Wrap your component inside template with <ClientOnly> tag, more info in my other answer
I've been struggling with the same problem (but with other libraries) and the only solution i've found was to copy the package into src/. Something like :
cp -a node_modules/package-giving-me-headaches src/plugins
and
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches"
Depending on the package, you may need to target a specific entry point :
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches/src"
You know you need to do that when Gridsome tells you :
"export 'default' (imported as 'PackageGivingMeHeadaches') was not found in '~/plugins/package-giving-me-headaches'
Edit : Yes, i know its not ideal and ugly, but i don't have time to fight for it.
I have installed a package #ng-bootstrap/ng-bootstrap for my angular project, I already implemented the carousel by it, but I need a multi-item carousel, can anybody suggest whether I can achieve it by this package or not, please suggest some tutorials.
In some research, I have not found that ng-bootstrap has a function for this at this time--Please correct me if I'm wrong.
https://github.com/ng-bootstrap/ng-bootstrap/issues/2083
If I ammm correct, since you already have the bootstrap dependency, I would import the 3 required js dependencies (popper, jquery, bootstrap.min.js)
and attempt to use something like this? (Is this what you are talking about?)
https://www.codeply.com/go/HDu8lT7NxJ
So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :
Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...
It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.