时间戳

首页 > 解决方案 > 无法从 ref (Vue3) 访问 Ionic 组件方法

javascript - 无法从 ref (Vue3) 访问 Ionic 组件方法

问题描述

我正在尝试访问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

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

标签： javascriptvue.jsionic-framework

解决方案

好吧，我想我明白了。尝试$el在 ref 之后添加

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

推荐阅读