Form1_Load код выполняется
Как это обычно бывает: у нас есть два во многом похожих компонента, имеющих одинаковую базовую функциональность, но достаточно появления минимального отличия, чтобы встал вопрос, делать два разных компонента или же сделать один компонент, меняя необходимые параметры через props?
Ни одно из решений не является идеальным: если вы примете решение разделить на два компонента, то рискуете обновлять его в двух местах в случае изменения логики в будущем. К тому же это решение нарушит принцип DRY (не повторяйся).
С другой стороны, слишком много props приведет к тому, что даже автор кода без погружения в контекст не поймет, как это работает.
content у меня для того что бы в нём находился текущий введенный текст, и потом я вот при каждом изменении в этом текстовом редакторе, то есть по событию change в quill, отправляю этот content. И уже в компоненте form-category т.к. есть такой вот вызов:<quill-editor v-model="category.text"></quill-editor>v-model="content" на компоненте <quill>, в общем сейчас у меня такой код:<template>
<quill v-model="content" :options="editorOption" @change="textChange"></quill>
</template><script>
export default {
model: {
prop: 'text',
event: 'quill-change',
},
props: {
text: {},
},
watch: {
text: function() {
this.content = this.text;
}
},
data: function() {
return {
content: '',
editorOption: {
placeholder: 'Описание категории...',
formats: [],
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
['link']
]
}
}
}
},
components: {
'quill': () => import(/* webpackChunkName: "/quill-editor" */ 'vue-quill-editor/src/editor')
},
methods: {
textChange: function() {
this.$emit('quill-change', this.content);
},
clearEditor: function() {
this.content = '';
}
}
}
</script>textизменяется то я записываю это значение в content, пока что ошибок не вижу с этим вариантом, опыта в общем в vue у меня пока мало. Правда теперь я думаю о насколько это производительно
<quill-editor>props: {
text: this.textContenSet,
},computed: {
textContenSet: function() {
return this.text;
}
}<template>
<vue-dropzone
ref="myVueDropzone"
id="dropzone"
:options="dropzoneOptions"
:useCustomSlot=true
v-on:vdropzone-files-added="addFile"
v-on:vdropzone-max-files-exceeded="limitedImages">
<p class="dropzone-elem__title">Загрузить изображение</p>
</vue-dropzone>
</template>
<script>
export default {
import vue2Dropzone from 'vue2-dropzone'
methods: {
removeAll: function() { //Очистка dropzone
this.$refs.myVueDropzone.removeAllFiles();
},
}
}
</script><template>
<dropzone-input
v-model="category.image"
title="Загрузить картинку"
class="form__dropzone dropzone-elem"
ref="dropzoneInput"></dropzone-input>
</template>this.$refs.dropzoneInput.removeAll(); //Очищаем dropzonePapa.parse("http://example.com/file.csv", {
download: true,
complete: function(results) {
console.log(results);
}
});
Paintформы свой код: