Question

我的页面上显示了播放列表列表。此列表由外部API提供。每个播放列表都有一个删除按钮，我试图让这个按钮工作。

随着播放列表从API中删除，API中的删除工作正常。现在缺少的部分是从我的视图中删除播放列表。

我有一个名为＆＃34; Playlists.vue＆＃34;的组件，其中包含以下代码：

<div class="playlists" v-if="playlists">
        <playlist v-for="playlist in playlists"
                  v-bind:key="playlist.id"
                  v-bind:playlist="playlist">
        </playlist>
        <span v-if="playlists.length === 0">No playlist found</span>
</div>

在Playlists.vue文件中，fetchData函数提供数据：

 methods: {
      async fetchData() {
        const playlists = await api.getAllPlaylists();
      }
    }

然后我有另一个组件来显示单个播放列表，Playlist.vue：

<div class="row">
    <div class="col">
      <textarea v-model="playlist.name" v-on:blur="updatePlaylist"></textarea> 
      <button v-on:click="deletePlaylist(playlist.id)">Delete</button>
    </div>
  </div>

我尝试在每次删除后重新调用fetchData函数，以更新播放列表变量以在删除后获取更新列表。所以我开始以这种方式导入组件Playlists.js：

 import playlists from './Playlists';

然后我在删除函数中调用了fetchData函数：

deletePlaylist(id) {
        playlist.deletePlaylist(id);
        playlists.fetchData();
},

但不幸的是，它不起作用，我总是得到这个错误：

未捕获的TypeError： WEBPACK_IMPORTED_MODULE_2__Playlists .a.fetchData不是函数

我尝试了其他解决方案，但我无法在Playlist.vue中调用Playlists.vue中的方法

任何修复？或者更好的解决方案？

非常感谢

Answer 1

我认为一个好的解决方案是使用Mixin。您可以按如下方式执行全局Mixin。

Vue.mixin({
  methods: {
     async fetchData() {
       const playlists = await api.getAllPlaylists();
     }
  }
});

将它放在主Vue实例之前，它可供任何组件使用。

如果您不希望全局可用，请按以下方式定义。

var fetchData = {
  methods: {
     async fetchData() {
       const playlists = await api.getAllPlaylists();
     }
  }
}

然后将其包含在您的组件定义

中

  export default {
     mixins: [fetchData],
     data(){
        //...
     }
  }

有关Mixins的更多信息https://vuejs.org/v2/guide/mixins.html

从其他组件调用组件方法

1 个答案: