ruby on rails vue 和 html.slim

Posted 2023-02-22

【中文标题】ruby on rails vue 和 html.slim

【英文标题】：ruby on rails vue and 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函数。我们有同样的问题，数据不更新，你能帮我吗？

【参考方案1】：

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

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