Блог

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

Я инициализирую свой компонент с:

 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
  

Почему?

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

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

 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')
  }
})