Я пытаюсь использовать внешнюю библиотеку JS, которая создает холст для рисования (atrament.js) в приложении vue.js.

Я не уверен, как это сделать правильно. Прямо сейчас я просто делаю:

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp'
    });
</script>
<script type="text/javascript">var atr = atrament("canvas", 500, 500);</script>

И с этим холст создается везде, где я помещаю теги <canvas></canvas>.

Однако это не кажется очень элегантным вариантом, и переменная atr недоступна для приложения vue, например, для очистки холста. Итак, как правильно это сделать?

3
user1294122 26 Дек 2016 в 06:23

2 ответа

У вас должна быть переменная atr в качестве переменной vue data, как показано ниже :

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp',
        data: {
          atr : atrament("canvas", 500, 500)
        }
    });
</script>

Теперь atr будет доступен в приложении vue через this.atr, и вы сможете выполнять с ним необходимые операции.

0
Saurabh 26 Дек 2016 в 06:26
Спасибо за ваш ответ, я уже пробовал это, но холст не работает, когда я это делаю. По какой-то причине появляется холст, но я не могу на нем рисовать. В консоли JS ошибок не отображается. При этом я загружаю приложение vue в конец html-файла, потому что, если я помещаю его в , появляется сообщение «Теги не найдены», так что библиотека холста действительно что-то делает.
 – 
user1294122
26 Дек 2016 в 17:00
Вы можете создать из него скрипку?
 – 
Saurabh
27 Дек 2016 в 06:27

Поскольку Vue представляет собой библиотеку пользовательского интерфейса на основе компонентов, вам следует подумать о компонентах .

Подумайте о том, чтобы обернуть этот холст в компонент, и ваш родительский элемент будет общаться с ним через свойства и события. У Vue есть очень чистая документация для этого: https://vuejs.org/v2/guide/components .html

0
CodinCat 26 Дек 2016 в 11:09