var tagArray = []; const data=[ 'th', 'efi', 'wichtig', ]; const CreateMsgRouter = { template: ` <div class="content card om-card"> <h4>Neue Nachricht erstellen</h4> <b-field> <b-input placeholder="User" id="user"></b-input> </b-field> <b-field> <b-input placeholder="Betreff" id="subject"></b-input> </b-field> <b-field label="Tags"> <b-taginput id="tag" v-model="selected" :data=taglist autocomplete allow-new:false icon="label" placeholder="#" @typing="getFilteredTags" @input="saveTagsToArray"> </b-taginput> </b-field> <b-field> <b-input placeholder="Nachricht" id="message" type="textarea"></b-input> </b-field> <b-button @click="$router.go(-1)">ABBRECHEN</b-button> <b-button type="is-primary" @click="createMsg">SENDEN</b-button> </div> `, data: function () { return { selected: [], taglist: data, }; }, methods: { saveTagsToArray: function() { tagArray = this.selected; console.info(tagArray); }, createMsg: function () { var _subject = $("#subject").val(); var _message = $("#message").val(); var _tag = tagArray; var _user = $("#user").val(); //console.log("Message Created: " + _tag + " " + _message + " " + _user); $.ajax({ url: "api/msg", data: { subject: _subject, message: _message, user: _user, tag: _tag }, method: "POST" }).done(have_result).fail(have_error); function have_result(res) { //console.log(res); router.push('/home') } function have_error(err) { console.log("error: " + err.responseText); console.log(err); } }, getFilteredTags(text) { this.taglist = data.filter((option) => { return option .toString() .toLowerCase() .indexOf(text.toLowerCase()) >= 0 }) }, list_tags: function () { $.ajax({url: "api/tag/ids",method: "GET"}) .done(jd => { // NICHT SO wg. Vue: _messagelist = jd; _taglist.splice(0, _taglist.length); _taglist.push.apply(_taglist, jd); console.log("tag: jd: " + jd); for (var e in jd) { if (!_tags[jd[e]]) { get_insert_tag(jd[e]); } } }).fail(function (e, f, g) { console.log("err: " + e + f + g); }); } }, mounted: function () { this.list_tags(); if ($(this).bootstrapMaterialDesign) $(this).bootstrapMaterialDesign(); }, }; function get_insert_tag(id){ $.ajax({ url: "api/tag/"+id, method: "GET" }).done(function (tag) { data.push("#" + tag.name); console.log("Array:"+this.data); }).fail(function (e, f, g) { console.log("cannot load " + id + ".json: " + e + f + g); }) }