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，从而使{ {1}}在下一次调用时引发错误，指出找不到模板。

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

ruby on rails vue和html.slim

1 个答案: