javascript - Cannot access Ionic component method from ref (Vue3) - Stack Overflow

admin管理员组

文章数量:1430011

I'm trying to access the closeSlidingItems method of the IonList ponent so that the sliding item is closed automatically once I click on a button which appears from behind after sliding this item to the right.

I tried to do it by putting a reference to IonList, then accessing it from the callback method for the click event on this button. However, I get an error:

Cannot read property 'closeSlidingItems' of undefined

This is the code in the root ponent:

<template>
  <ion-app>
    <ion-list ref="myIonList">
      <ion-item-sliding v-for="user in users" :key="user">
        <ion-item-options side="start">
          <ion-item-option v-on:click="favorite(user)" color="primary">
            <ion-icon slot="icon-only" :icon="heartOutline"></ion-icon>
          </ion-item-option>
        </ion-item-options>

        <ion-item :color="userState(user)">
          <ion-label slot="start">{{ user.name }}</ion-label>
          <ion-label slot="end">{{ user.age }}</ion-label>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </ion-app>
</template>

<script>
import {
  IonApp,
  IonContent,
  IonList,
  IonLabel,
  IonItem,
  IonItemSliding,
  IonItemOptions,
  IonItemOption,
  IonIcon,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { heartOutline } from "ionicons/icons";

export default defineComponent({
  name: "App",
  ponents: {
    IonApp,
    IonList,
    IonLabel,
    IonItem,
    IonItemSliding,
    IonItemOptions,
    IonItemOption,
    IonIcon,
  },
  data() {
    return {
      heartOutline,
      users: [
        {
          name: "John",
          age: 35,
          favorite: false,
        },
        {
          name: "Jane",
          age: 30,
          favorite: false,
        },
      ],
    };
  },
  methods: {
    favorite(user) {
      const favorite = user.favorite || false;
      user.favorite = !favorite;
      //console.log(this.$refs.myIonList);
      // This won't work despite I defined a reference to IonList and closeSlidingItems is a method of this ponent!
      this.$refs.myIonList.closeSlidingItems();
    },
    userState(user) {
      return user.favorite ? "success" : "";
    },
  },
});
</script>

And to try it by yourselves (try sliding one list item to the right and clicking on the heart icon):

=/src/App.vue

Could anyone help me find the issue and how to fix it, or work around it?

I'm trying to access the closeSlidingItems method of the IonList ponent so that the sliding item is closed automatically once I click on a button which appears from behind after sliding this item to the right.

I tried to do it by putting a reference to IonList, then accessing it from the callback method for the click event on this button. However, I get an error:

Cannot read property 'closeSlidingItems' of undefined

This is the code in the root ponent:

<template>
  <ion-app>
    <ion-list ref="myIonList">
      <ion-item-sliding v-for="user in users" :key="user">
        <ion-item-options side="start">
          <ion-item-option v-on:click="favorite(user)" color="primary">
            <ion-icon slot="icon-only" :icon="heartOutline"></ion-icon>
          </ion-item-option>
        </ion-item-options>

        <ion-item :color="userState(user)">
          <ion-label slot="start">{{ user.name }}</ion-label>
          <ion-label slot="end">{{ user.age }}</ion-label>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </ion-app>
</template>

<script>
import {
  IonApp,
  IonContent,
  IonList,
  IonLabel,
  IonItem,
  IonItemSliding,
  IonItemOptions,
  IonItemOption,
  IonIcon,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { heartOutline } from "ionicons/icons";

export default defineComponent({
  name: "App",
  ponents: {
    IonApp,
    IonList,
    IonLabel,
    IonItem,
    IonItemSliding,
    IonItemOptions,
    IonItemOption,
    IonIcon,
  },
  data() {
    return {
      heartOutline,
      users: [
        {
          name: "John",
          age: 35,
          favorite: false,
        },
        {
          name: "Jane",
          age: 30,
          favorite: false,
        },
      ],
    };
  },
  methods: {
    favorite(user) {
      const favorite = user.favorite || false;
      user.favorite = !favorite;
      //console.log(this.$refs.myIonList);
      // This won't work despite I defined a reference to IonList and closeSlidingItems is a method of this ponent!
      this.$refs.myIonList.closeSlidingItems();
    },
    userState(user) {
      return user.favorite ? "success" : "";
    },
  },
});
</script>

And to try it by yourselves (try sliding one list item to the right and clicking on the heart icon):

https://codesandbox.io/s/ionic-vue-refs-2-msjj6?file=/src/App.vue

Could anyone help me find the issue and how to fix it, or work around it?

• javascript
• vue.js
• ionic-framework

Share Improve this question Follow edited Dec 15, 2020 at 22:07 Luis Martin asked Dec 15, 2020 at 22:01 Luis MartinLuis Martin 97333 gold badges1515 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

Okay, I think I got it. Try adding $el after the ref

this.$refs.myIonList.$el.closeSlidingItems()

Same for ion-item-sliding close method. See below simplified example. It looks like the ponent methods are not visible when you try to get the ponent instance using Vue3. Ref returns a Proxy object in that case.

https://codesandbox.io/s/ionic-vue-refs-2-forked-zx3lg?file=/src/App.vue

本文标签： javascriptCannot access Ionic component method from ref (Vue3)Stack Overflow