Ответы пользователя по тегу Vue.js
  • Как организовать динамическую форму?

    Для динамического рендеринга по схеме, где данными описано, что рендерить, в целом достаточного просто циклом пройтись по этим данным и вывести нужный компонент через динамический компонент.

    ```html

    {{ specification.name }}
    :is="componentForFormElement[specification.type]"
    :id="some-generated-id"
    v-model="results[specification.name]"
    :required="specification.is_required"
    :options="specification.options"
    />

    ```

    Конкретный вид будет зависеть от того, что у вас есть для вывода элементов формы, но общая идея - динамически выводить нужный компонент, в зависимости от `type`. Самое удобное, если для каждого типа есть свой компонент. и они имеют одинаковый интерфейс, чтобы им можно было одинакового передать параметры.

    Если компонентов нет, можно сделать и топорно - прямо ифами в шаблоне определять, как рендерить в зависимости от типа.

    По второму вопросу - можно сделать объект, где ключ - имя поля формы (правда, у вас будто нет поля в описании для этого, потому я использовал name), а значение - значение элемента формы по этому имени.
    Ответ написан
    1 комментарий
  • Как повторить данный код при ошибке запроса?

    Сделайте отдельный метод типа fetchData(). Вызывайте его в mounted.

    fetchData() {
      this.dataRequest.then(response => {
            this.filter() // для планировок экшен
            this.setMarkers(this.residentials)
            this.map.on("zoomstart", this.onZoomStart);
            this.map.on("zoomend", this.onZoomEnd);
            
          })
          .catch(error => {
            this.fetchData();
          });
    }


    Но по-хорошему бы:
    1. Разбить это на большее число методов, выделив работу с картой в отдельный метод от получения данных
    2. fetchData в catch запускать через timeout
    3. В catch надо бы определять, что проблема именно сети, а не другая: ни ошибка с сервера, ни какая-то на клиентской стороне. Не знаю, чем и как вы шлёте запросы, по этому не могу сразу код предложить.

    На ES по-старше будет чуть красивее:

    mounted() {
        this.markers = DG.featureGroup();
        this.popups = DG.featureGroup();
    
        this.map = DG.map("map", {
          center: [54.98, 82.89],
          zoom: 9,
          minZoom: 7,
          zoomControl: false,
          fullscreenControl: false
        });
        
        await fetchData();
        this.setMapMarkets();
      },
      methods: {
        setMapMarkers() {
            this.filter() // для планировок экшен
            this.setMarkers(this.residentials)
            this.map.on("zoomstart", this.onZoomStart);
            this.map.on("zoomend", this.onZoomEnd);
        },
       
        async fetchData() {
            try {
                const response = await this.dataRequest();
                // как-то надо использовать response, но у вас нет использования
            } catch (e) {
                // if ошибка сети
               await this.fetchData()
            }
        }
      }
    Ответ написан
  • Как осуществить подключение внешнего файла *.js к компоненту *.vue?

    import hover from '../script/hover.js'

    Этот код должен корректно импортировать. Если так не импортируется, то проблема в файле. Есть ли в нём собственно export?

    Если hoverEffect создаёт эффект, напрямую манипулируя DOM, то он может не работать потому, что это противоречит vue, в котором страница рендерится посредством манипулирования над Virtual DOM.

    В любом случае, опишите подробнее, что именно вы хотите сделать (задачу, а не просто "вот код подключить"), что за библиотеку используете, какие ошибки вылезают.
    Ответ написан
  • Как разрабатывать vue.js + node.js на локалке?

    На production они уже будут работать на одном порту.

    На локалке в дев работают в браузере с приложением, которое поднято vue (webpack dev server, в вашем случае на 8080).

    Чтобы запросы с приложения шли на сервер на nodejs достаточно добавить прокси в вебпак.
    Во vue.conf.js (или как там конфиг называется) добавить в конфиг вебпака:
    devServer: {
        proxy: {
          '/api': 'http://localhost:3000'
        }
    }


    Ссылка на доку по прокси в вебпаке

    Ссылка на доку по конфигурированию вебпака во vue cli

    Это всё, если у вас SPA.
    Ответ написан
    Комментировать