ruby на рельсах vue и html.slim - PullRequest
Новая
       29

ruby на рельсах vue и html.slim

0 голосов
/ 20 февраля 2019

Я запустил приложение 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. Отображение результатаclear и vue отображают json и различные элементы.Но когда я использую второй раз строку поиска, результат остается прежним и не обновляется.Я убедился, что search_results: event.detail[0].organisations правильно обновлен.Но на уровне файла view .html.slim мы не обновляли первую страницу.

Я попытался повторно вызвать представление, но безуспешно.Чтобы добавить информацию, когда я ищу другой элемент (в первый раз и во второй раз у нас не было ошибок на сервере и в консоли браузера)

Я хотел бы знать, если что-то не так в моем процессе, выполнитеВы уже видели эту проблему?или у вас есть представление о представленной проблеме.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 25 февраля 2019

Вы инициализируете Vue для каждого ajax:success события, которое работает только в первый раз, потому что Vue подключается к странице и, следовательно, удаляет шаблон и его идентификатор, что приводит к Vue возникновению ошибкиследующие вызовы о том, что шаблон не может быть найден.

Вместо этого инициализируйте Vue при загрузке страницы, а затем используйте Vue.set(object, key, value) после ajax:success для обновления данных Vue search_resultsатрибут.

...