Vue.js печатает сырой html и вызывает методы компонента

Question

Я динамически загружаю html-контент из ajax-запроса. Этот HTML имеет несколько кнопок, таких как

<button @click="someComponentMethod">Add</button>

Как видите, я пытаюсь вызывать методы компонентов. Но это не работает.

Я думаю, что вместо @click атрибут html по умолчанию должен работать на «onclick». Но это будет распознавать только функции, которые определены в глобальной области видимости. Может кто-нибудь подсказать мне, как я могу вызвать функцию компонента из основного javascript, т.е. используя "onclick".

Обновление

Ok! Я понял, что v-html не скомпилирует этот html. Но можете ли вы, ребята, сказать мне, как я могу вызвать компонентный метод из javascript (т.е. вне области видимости компонента). Таким образом, я смогу использовать onclick="JAVASCRIPT_CODE_TO_EXECUTE_METHOD".

Answer 1

Вместо загрузки HTML я в конечном итоге сохраняю компонент в формате JSON. Этот компонент имеет свойство шаблона, в котором хранится строка html. Таким образом, я могу хранить и загружать компоненты в базу данных и из нее, и она работает без проблем.

Answer 2

Это содержимое не будет скомпилировано, как указано в official docs:

Содержимое span будет заменено значением свойства rawHtml, интерпретируемым как обычный HTML - привязки данных игнорируются. Обратите внимание, что вы не можете использовать v-html для составления частичных шаблонов, потому что Vue не является механизмом шаблонов на основе строк. Вместо этого компоненты являются предпочтительными в качестве основной единицы для повторного использования и компоновки пользовательского интерфейса.