CODEWITHSUNDEEP
arraysvue.jsinputtags
iviviviviv
iviviviviv

Reputation: 21

Vue input tag element - how to fill it with tags properly?

I am using vue element <input-tag>, and I need to make edit page for one entity which contains tags. So the <input-tag> field should be populated based on the current values ​​in the entity. I managed to do that, but the whole JSON object appears in <input-tag> field (example: {"id":2, "tagName": "vuejsproblem", "newsId": 1}), not only tagName as it should be.

Also, in console I got error, I don't know why, because this.tags is obviously not "":

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got String with value "".

found in

---> <InputTag>

This is code of my vue page:

<template>
  <div class="pt-5">
    <form @submit.prevent="editNews">


        <div id="app">
        <label for="tags">Tags</label>
  <input-tag placeholder="Add Tag" v-model.trim="tags"></input-tag>
        <br>
        </div>

      <button type="submit" class="btn btn-primary mt-2">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "EditNews",
  data() {
    return {
      tags: '',
    }
  },
    beforeMount () {
    this.$axios.get(`/api/news/${this.$route.params.id}`,{
      id: this.$route.params.id,
      }).then((response) => {
      this.tags = response.data.tags;
    });   
/*     this.tags.forEach(element => element.tagName);
 */
    },
  methods: {
    editNews() {
      this.message = '';
      if(this.tags.length > 1) {
          console.log(this.tags)
      this.$axios.post(`/api/news/${this.$route.params.id}`, {
        tags: this.tags,
      }).then(
            data => {
              this.message = data.message;
            },
            error => {
              this.message = error.response.data
              alert(this.message);      
            });

      }
    },
  },
}
</script>

<style scoped>

</style>

Upvotes: 1

Views: 1206

Answers (2)

cafertayyar
cafertayyar

Reputation: 1072

As it is said here, tags must be Array. So, define tags as Array in data() like:

data() {
   return {
      tags: [],
   }
}

Also response.data.tags must be Array something like [ "Jerry", "Kramer", "Elaine", "George" ] as here.

You can convert response.data.tags to Array which contains only tagName by doing this: this.tags = response.data.tags.map(x => x.tagName)

Upvotes: 1

simultsop
simultsop

Reputation: 800

Based on what I could understand from your question (if I got it right), you can do that using the render helper from vuejs, depending on which version you're trying to achieve this v2 or v3

Back in v2 you could do something like: https://github.com/vubular/elements/blob/master/src/text/Plain.vue using the this._v you can bind directly the content from the slot of the component or you could wrap with any html tag before passing the content in for example this._v('<span>'+this.content+'</span>'), you can also define tag as prop and then render prop instead of hardcoded tags.

Meanwhile in v3 you can return the h helper imported from vue: render() { return h('span', {}, this.transformedContent); },. Again you can accept the span/tag as prop in child component context.

When doing so you don't need to define a <template> for your component so that you can render the component using vue helpers (where it then handles the DOM interactions).

Upvotes: 1

Related Questions