ionic-team / ionic-team/ionic-framework

feat: ionic vue expose methods on vue component instance

Open
#22,304 3 comments 0 reactions 0 assignees View on GitHub
package: vue type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.x**

**Current behavior:**

I call IonContent scrollToTop method and console expections is thrown:
"Uncaught TypeError: content.value.scrollToTop is not a function"

**Expected behavior:**

IonContent method scrollToTop works.

**Steps to reproduce:**

1. Create ref of IonContent - ...
2. Scroll page to down
2. Call content.value.scrollToTop()

**Related code:**

```



import {IonContent} from "@ionic/vue";
import {ref} from "vue";

export default {
name: "Test",
components: {
IonContent,
},
setup(){
const content = ref();

return {
content,
scrollToTop: () => content.value.scrollToTop()
}
}
};

```

**Other information:**

**Ionic info:**

```
Ionic:

Ionic CLI : 5.4.16 (C:\Users\Damian\AppData\Local\Yarn\Data\global\node_modules\ionic)
Ionic Framework : @ionic/vue 0.5.2

Capacitor:

Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.19.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.8
OS : Windows 10
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported Ionic Vue example with an IonContent ref and inspect the Vue component/ref integration for exposed methods. The issue is done when content.value.scrollToTop() works after the page has been scrolled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.