Как правильно генерировать куски сырого HTML в рамках vue с доступом к другим компонентам vue?

Question

[776166]

Генерируется список значений в реактивных переменных. Каждое из значений может оборачиваться в HTML-код, который может содержать в себе вызовы к другим компонентам vue.
Как это вообще правильно делать? Есть best practice?
Идеально — генерировать HTML через JS, вставлять средствами vue через реактивные переменные. Тут надо понять, как правильно обратиться к функции vue через сырой js. Я доки читал, пока не понял. В этом суть вопроса.
Более избыточный вариант — городить какие-то шаблоны самого vue, но так не хотелось бы делать.

Comments

[Сергей Соколов]

Дигамически создавать компоненты vue и передавать в них html темплейта; или как-то использовать слоты.
Создайте минимальный упрощенный пример, демонстрирующий задачу.

[776166]

Сергей Соколов,

Пример демонстрационный.
1) В шаблоне переменная foo, она реактивная.
2) Я выставляю её значение функцией setFoo.
3) В странице должна появиться ссылка, которая должна запустить функцию searchFoo({{ foo }}).

Как правильно вызвать эту функцию?

<template lang='pug'>
    <div>{{ foo }}</div>
</template>

export default {
        name: "searchTheFoo",
        data() {
            return {
                foo: "",
            }
        },
        methods: {
            searchFoo: function() {
                console.log("foo");
            },

            setFoo: function(){
                this.foo = '<a href="#" onClick="searchFoo('+ foo +')">' + foo + '</a>'
            },
        }
    }

Answer 1

[Сергей Соколов]

Пока не вижу сложности. Кажется, просто надо разобраться с темплейтами и компонентами:


Вот компонент FooSearchComponent, в который через props из родителя передаём реактивное свойство foo:

Vue.component(
  "FooSearchComponent",
  {
    props: ['foo'],
    template: '<div>
      <a
        href="#"
        @click="searchFoo(foo)"
      >
        {{ foo }}
      </a>
    </div>',
    methods: {
      searchFoo: function(search) {
        console.log("searchFoo:", search);
      },
    }
  }
);

В его темплейте выводится ссылка, в которой слушается событие клика и по нему вызывается собственный метод searchFoo() в который параметром передаётся свойство (реактивное, извне) foo

Comments

[776166]

Операций по оборачиванию переменной в HTML может быть несколько и применяться они могут в любом порядке. Их удобно делать не в шаблонах, а именно в JS. Есть какой-то способ сырым JS вызвать функцию vue?

[Сергей Соколов]

776166, это сильно пахнет костылингом!
При создании можно сохранить ссылку на инстанс: const vm = new Vue({ ... })

До методов корневого можно дотянуться через vm.methodName()

Компоненту можно дать атрибут ref:

<template>
  <foo-search-component  ref="fooReference" ... />
</template>

И дотянуться до этого инстанса можно через $refs:vm.$refs.fooReference.searchFoo('дотянулся!');

Повторю, это смахивает на забивание скрипкой гвоздей. Скорее всего, есть более лаконичное решение. Если бы вы описали минимальную задачу-пример подробнее.

[776166]

Сергей Соколов,

const bus = new Vue({ ... }) определено где-то в другом месте, но я могу это импортировать.
Метод определён не в корне, а в текущем приложении, или как там это называется.

Проблема в том, что в $refs этой переменной ничего нет.
Функции описаны в this.defaults, если сделать console.log, но я в силу тупости не могу понять, как к ним обратиться. Потому что, похоже в контексте мгу и страницы в целом это разные this.

[Сергей Соколов]

776166, ничем не могу помочь, мне же не видно ваш код.

Хрустальный шар подсказывает, что bus это не тот, а вспомогательный инстанс Vue для работы с событиями. Недавно попадался на глаза такой "хак". Ищите другой инстанс = new Vue()

[776166]

Всё, что есть в самом-самом корневом main.js

export const bus = new Vue()
new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App },
})

[Сергей Соколов]

776166, видите, создают два инстанса Vue. Один в константу bus, другой вникуда.
Надо тоже назначить константе и её далее использовать, как писал выше.
Велосипедная мастерская открыта.

p.s. конечно же это не «самый-самый корневой», т.к. что-то экспортирует.

[776166]

Если назначить константой, то возвращается undefined. Если не импортировать в этот vue, то его нет. В не константе всё равно нет нужных полей.
В консольке они доступны в this, но я не понимаю, как обратиться к default из этого this.

Неужели это так сложно в JS вызвать функцию из vue?

[Сергей Соколов]

Если назначить константой, то возвращается undefined

776166, покажите, как «назначаете»

[776166]

Экспорт

export const necobus = new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App },
})

Импорт

<script>
import {necobus} from '../../main'
export default {
  name: "mainSearch",
  components: {
    necobus,
  },
}
<script>