Монтировать компонент вида только в одном Rails View

Question

Я создаю компонент вида для обработки некоторых элементов выбора ... Мне нужно загрузить этот компонент в одном Rails View.

Я запускаю свой компонент с помощью:

import Vue from 'vue'
import Product from '../components/product.vue'
import axios from 'axios';

Vue.prototype.$http = axios

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  console.log('caricato Vue');
  const app = new Vue({
    render: h => h(Product)
  }).$mount('#product_search')
})

И на моей странице Rails у меня есть #product_search div

Rails пытается загрузить компонент на каждой странице и выдает ошибку:

vue.runtime.esm.js:619 [Vue warn]: Cannot find element: #product_search

Почему?

Answer 1

Поскольку Vue пытается отобразить компонент (на #product_search), когда document готов, то есть на каждой странице вашего приложения.

Вы можете добавить условие для предотвращения нулевой ошибки:

document.addEventListener('DOMContentLoaded', () => {
  let element = document.querySelector('#product_search')
  if (element) {
    document.body.appendChild(document.createElement('app'))
    console.log('caricato Vue');
    const app = new Vue({
      render: h => h(Product)
    }).$mount('#product_search')
  }
})