ruby on rails vue 和 html.slim答案

【问题标题】：ruby on rails vue and html.slimruby on rails vue 和 html.slim
【发布时间】：2019-07-13 12:05:19
【问题描述】：

我已经启动了一个 ruby on rails 应用程序。在这个中，我们可以找到一个搜索栏。此外，结果以 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 文件的级别上，我们没有更新首页。

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

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

感谢您的帮助。

【问题讨论】：

大家好，为了调查，我快速创建了一个新的最小应用程序来说明我的问题。所以，我们在这里创建了一个公共链接gitlab.com/arabakevin/rails-vue。在这个链接中，我们可以找到一个 js 文件 (gitlab.com/arabakevin/rails-vue/blob/master/app/javascript/…) 和一个 html.slim 文件 (gitlab.com/arabakevin/rails-vue/blob/master/app/views/pages/…)。我们只有两个功能。第一个，改变VUE的数据传输，第二个调用Vue函数。我们有同样的问题，数据不更新，你能帮我吗？

标签： ruby-on-rails json ruby-on-rails-4 vue.js slim-lang

【解决方案1】：

您正在对每个 ajax:success 事件初始化 Vue，这仅在第一次起作用，因为 Vue 正在钩入页面，因此删除了模板及其 ID，这使得 Vue 抛出错误下一个调用说明找不到模板。

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

【讨论】：