ruby on rails vue和html.slim

Question

我已经在rails应用程序上启动了ruby。在这一个中，我们可以找到一个搜索栏。此外，结果是以json格式返回。视图由vue更新。

我的控制器第一次

  def index
if params[:search].nil?
  render 'index'
else
  @organisations = Organisation.search(params[:search])
  respond_to do |format|
    format.json do
      render json: {
        organisations: @organisations
      }, status: :ok
    end
  end
end
end

我们第二次用js文件检查结果，这里我整合了vue

    if (Object.keys(event.detail[0].organisations)[0] != undefined){
  console.log ("results")
  console.log (" here we display the result json " + event.detail[0].organisations )
  document.querySelector('#results').classList.add("d-inline")

 var app = new Vue({
   el: '#app',
    data: {
      return{
        search_results: event.detail[0].organisations
      }
    }
  })
}else{
  console.log ("not results")
  document.querySelector('#no-result').classList.add("d-inline")
}
})

最后一个文件是我们用vue指示结果的视图。此视图文件是.html.slim文件。

     .container.w-100.text-center
    #app
      .all_details
        | {{ search_results }}
      ul.list-group.list-group-flush
        li.list-group-item v-for=("search_result in search_results")
          .row
            .col.mt-2
              | {{ search_result.id }}
            .col.mt-2
              | {{ search_result.name }}
            .col.mt-2
              button#ok.btn.btn-primary type="button" 

因此，当我第一次搜索元素时，搜索栏正常工作，这个生成json预期。结果显示清晰，vue显示json和不同的元素。但是当我第二次使用搜索栏时，结果保持不变并且不会更新。我已经验证search_results: event.detail[0].organisations已正确更新。但是在视图.html.slim文件的级别上，我们没有更新首页。

我试图强制重新审视视图，但没有成功。要添加信息，当我搜索不同的元素时（第一次和第二次我们在浏览器的服务器和控制台中没有错误）

我想知道如果我的过程出现问题，您是否已经看过这个问题？或者您对所提出的问题有所了解。

谢谢你的帮助。

Answer 1

你正在每个Vue事件初始化ajax:success，这只是第一次工作，因为Vue挂钩到页面，因此删除模板及其ID，这使得Vue在下次调用时抛出错误，指出模板不能找到。

相反，在页面加载时初始化Vue，然后在Vue.set(object, key, value)之后使用ajax:success以更新Vue的数据search_results属性。