无法从 ref (Vue3) 访问 Ionic 组件方法答案

【问题标题】：Cannot access Ionic component method from ref (Vue3)无法从 ref (Vue3) 访问 Ionic 组件方法
【发布时间】：2021-03-26 14:04:00
【问题描述】：

我正在尝试访问 IonList 组件的 closeSlidingItems 方法，以便在单击滑动后从后面出现的按钮时自动关闭滑动项这个项目在右边。

我尝试通过引用 IonList，然后从回调方法访问该按钮上的单击事件来访问它。但是，我收到一个错误：

无法读取未定义的属性“closeSlidingItems”

这是根组件中的代码：

<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",
  components: {
    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 component!
      this.$refs.myIonList.closeSlidingItems();
    },
    userState(user) {
      return user.favorite ? "success" : "";
    },
  },
});
</script>

自己尝试一下（尝试向右滑动一个列表项并单击心形图标）：

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

谁能帮我找到问题以及如何解决它，或者解决它？

【问题讨论】：

标签： javascript vue.js ionic-framework

【解决方案1】：

好的，我想我明白了。尝试在引用后添加$el

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

【讨论】：

太棒了！有用！谢谢！我在文档中没有看到。据说使用 this.$refs..method() 你从哪里找到的？

【解决方案2】：

ion-item-slidingclose 方法相同。请参见下面的简化示例。当您尝试使用 Vue3 获取组件实例时，组件方法似乎不可见。在这种情况下，Ref 返回一个 Proxy 对象。

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

【讨论】：