Question

我正在使用vue.js和OwlCarousel，每次我在旋转木马上使用v-for时，它都没有显示旋转木马的样式，它只显示列中的图像。

这是对API的请求：

<script>
export default {
  data: {
    videos_p: []
  },
  mounted() {
    axios.get("xxxxxxxxxxx")
      .then(response => {
        this.videos_p = response.data
        console.log(this.videos_p)
      })
  }
}

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    items: 4,
    loop: true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 900,
    autoplayHoverPause: true,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true,
        loop: false,
        margin: 20
      }
    }
  });

})
</script>

这是html：

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
          <div class="item" v-for="video in videos_p">
            <img v-bind:src="video.image_url">
          </div>
        </div>
      </div>
    </div>
  </section>

但每次我使用vue时它都没有显示旋转木马它只显示列中的图像，但是如果我使用这样的例子它可以正常工作：

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div> -->
        </div>
      </div>
    </div>
  </section>

任何我在犯错误的地方?????

Answer 1

您要找的是Vue-nextTick

正在发生的事情是JS在axios发送响应之前正在执行您的$（）。owlCarousel，因为您不知道何时收到响应，您需要等到收到axios的响应然后立即在Vue.nextTick（）;

中执行代码

另一个问题是var vm = this; //declare this just BEFORE calling axios(); // The below are inside axios.then() vm.videos_p = response.data; Vue.nextTick(function(){ $('.owl-carousel').owlCarousel({ items: 4, loop: true, margin: 10, autoplay: true, autoplayTimeout: 900, autoplayHoverPause: true, responsiveClass: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 3, nav: false }, 1000: { items: 5, nav: true, loop: false, margin: 20 } } }); }.bind(vm));并未指向method: {}中的Vue实例，因此您需要创建一个变量并将installOwlCarousel存储到其中。

在您的方法中，在调用axios回调后，添加以下内容：

process.nextTick()

然后完全删除您的$（文档）.ready（）;

我会继续在VueJS中制作data: { .... }, method: { installOwlCarousel: function(){ $('.owl-carousel').owlCarousel({ //my options }); }, mounted: function(){ var vm = this; axios.get('...xx..') .then((res)=>{ vm.videos_p = res.data; Vue.nextTick(function(){ vm.installOwlCarousel(); }.bind(vm)); }) .catch((err)=>{ if(err) console.log(err); }); } }，并将其称为#include <windows.h> #include <DShow.h> #define DLL extern "C" _declspec(dllexport) using namespace std; wchar_t *convertCharArrayToLPCWSTR(const char* charArray) { wchar_t* wString = new wchar_t[4096]; MultiByteToWideChar(CP_ACP, 0, charArray, -1, wString, 4096); return wString; } DLL double video_init() { if(FAILED(CoInitialize(NULL))){ MessageBox(NULL,L"Failed to initialize COM library.",L"ERROR", MB_ICONERROR | MB_OK); return false; } return true; } DLL void video_uninit() { CoUninitialize(); } DLL double video_add(HWND window, char *fname) { IGraphBuilder *pGraph = NULL; HRESULT hr = S_OK; hr = CoCreateInstance(CLSID_FilterGraph, NULL, CLSCTX_INPROC_SERVER, IID_IGraphBuilder, (void **)&pGraph); hr = pGraph->RenderFile(convertCharArrayToLPCWSTR(fname), NULL); if(FAILED(hr)) return NULL; IVideoWindow *pVidWin = NULL; hr = pGraph->QueryInterface(IID_IVideoWindow, (void **)&pVidWin); hr = pVidWin->put_Owner((OAHWND)window); hr = pVidWin->put_WindowStyle(WS_CHILD | WS_CLIPSIBLINGS); pVidWin->Release(); IMediaControl *pControl = NULL; hr = pGraph->QueryInterface(IID_IMediaControl,(void**)&pControl); hr = pControl->Run(); hr = pControl->Pause(); pControl->Release(); return (double)(DWORD)(void *)pGraph; } DLL void video_start(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IMediaControl *pControl = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IMediaControl, (void **)&pControl); hr = pControl->Run(); pControl->Release(); } DLL void video_stop(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IMediaControl *pControl = NULL; IMediaSeeking *pSeek = NULL; REFERENCE_TIME stoptime = 0; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IMediaControl,(void**)&pControl); OAFilterState fs; hr = pControl->GetState(100,&fs); switch(fs){ case State_Running: hr = pControl->Pause(); case State_Paused: pGraph->QueryInterface(IID_IMediaSeeking,(void**)&pSeek); hr = pSeek->SetPositions(&stoptime,AM_SEEKING_AbsolutePositioning,0,AM_SEEKING_NoPositioning); } pControl->Release(); pSeek->Release(); } DLL void video_pause(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IMediaControl *pControl = NULL; HRESULT hr = S_OK; pGraph->QueryInterface(IID_IMediaControl,(void**)&pControl); hr = pControl->Pause(); pControl->Release(); } DLL void video_delete(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; pGraph->Release(); } DLL void video_set_rectangle(double video,double x,double y,double w,double h) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IVideoWindow *pVidWin = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IVideoWindow,(void**)&pVidWin); hr = pVidWin->SetWindowPosition((long)x, (long)y, (long)w, (long)h); pVidWin->Release(); } DLL double video_is_playing(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IMediaControl *pControl = NULL; IMediaPosition *pPos = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IMediaControl, (void**)&pControl); OAFilterState fs; hr = pControl->GetState(100, &fs); switch (fs){ case State_Running: pGraph->QueryInterface(IID_IMediaPosition, (void**)&pPos); REFTIME currentPos; hr = pPos->get_CurrentPosition(&currentPos); REFTIME duration; hr = pPos->get_Duration(&duration); if (currentPos < duration) { return true; } else { video_stop(video); return false; } case State_Paused: return false; case State_Stopped: return false; } pControl->Release(); pPos->Release(); return false; } DLL double video_is_cursor_hidden(double video) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IVideoWindow *pVidWin = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IVideoWindow, (void**)&pVidWin); long hidden; hr = pVidWin->IsCursorHidden(&hidden); if (hidden == OATRUE) { return true; } else { return false; } pVidWin->Release(); } DLL void video_hide_cursor(double video, double hide) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IVideoWindow *pVidWin = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IVideoWindow, (void**)&pVidWin); if (hide == (double)true) { hr = pVidWin->HideCursor(OATRUE); } else { hr = pVidWin->HideCursor(OAFALSE); } pVidWin->Release(); } DLL void video_set_foreground(double video, double focus) { IGraphBuilder *pGraph = (IGraphBuilder *)(DWORD)video; IVideoWindow *pVidWin = NULL; HRESULT hr = S_OK; hr = pGraph->QueryInterface(IID_IVideoWindow, (void**)&pVidWin); if (focus == (double)true) { hr = pVidWin->SetWindowForeground(OATRUE); } else { hr = pVidWin->SetWindowForeground(OAFALSE); } pVidWin->Release(); } DLL void video_update(HWND window) { if (!(GetWindowLong(window, GWL_STYLE) & WS_CLIPCHILDREN)) { SetWindowLong(window, GWL_STYLE, GetWindowLong(window, GWL_STYLE) | WS_CLIPCHILDREN); } }，然后在我的return (double)(DWORD)(void *)pGraph;中调用它。类似的东西：

return (double)(DWORD)pGraph;

希望这有帮助。

将OwlCarousel与Vue.js一起使用的问题

1 个答案: