Я пытаюсь использовать vue -tags-input с Laravel 7. Я могу заставить его отображаться на странице в форме, и я могу ввести значения, но я не вижу, как предварительно заполнить теги при загрузке или как получить значения, представленные в форме. В конечном итоге я хочу иметь несколько экземпляров этого в форме (есть несколько полей тегов), поэтому необходимо обернуть его как повторно используемый компонент.
Вот мой компонент, который обертывает оригинал (в resources/js/components/TagsInput.vue) :
<template>
<div>
<vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags"/>
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default {
name: "TagsInput",
components: {
VueTagsInput,
},
data() {
return {
tag: '',
tags: []
};
},
};
</script>
Компонент добавляется к экземпляру Vue из resources/js/app.js (это единственный компонент):
const app = new Vue({
el: '#app',
components: {
"tagsinput": require('./components/TagsInput.vue').default
}
});
и вот как я хочу использовать его из шаблон лезвия:
<tagsinput id="tags" name="tags" :tags="{{ $tags }}"></tagsinput>
Есть несколько проблем:
- Данные, передаваемые через
{{ $tags }}, отображаются правильно (?) в свойстве tags (например, [{"key":"my tag","value":"My Tag"}] ), но теги не появляются в результирующем выводе. Из документов я понял, что я должен не объявлять tags как prop, так как это будет конфликтовать с тем, что находится в data. - Свойства
id и name применяются к самому внешнему элементу сгенерированной разметки, а не к базовому входному тегу, поэтому значения не отправляются содержащейся формой, поэтому в настоящее время они красивы, но бесполезны.
Есть некоторые другие элементы, которые я не понимаю - я не знаю, для чего предназначено свойство tag в data, и почему мне может понадобиться часть @tags-changed.
Я нашел это аналогичный вопрос , но, похоже, у него нет способа передать данные из Laravel. В целом я считаю Vue очень сложным - возможно, это неподходящий инструмент для работы.