ruby rails vue 和 html.slim

Question

我已经在 rails 应用程序上启动了 ruby。在这一个中，我们可以找到一个搜索栏。此外，结果是 return by 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 expected.The 结果显示清晰，vue 显示 json 和不同的元素。但是当我第二次使用搜索栏时，结果保持不变并且没有更新。我已确认 search_results: event.detail[0].organisations 已正确更新。但是在视图级别。html.slim 文件我们没有更新首页。

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

我想知道我的过程是否有问题，您是否已经看到这个问题？或者您对所提出的问题有想法吗？

感谢您的帮助。

Answer 1

您在每个 ajax:success 事件上初始化 Vue，这仅在第一次有效，因为 Vue 挂接到页面并因此删除了模板及其 ID，这使 Vue 在下一次调用时抛出错误，指出找不到模板。

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

ruby rails vue 和 html.slim

ruby on rails vue and html.slim

json

ruby-on-rails

slim-lang

ruby-on-rails-4

vue.js