vuejs push tags separately to input

Question

I have tags input which the data are separated by commas (,) and in edit page i'd like to show each of them separably. (separate based on comma's)'

Sample

data

here, goes, testing,tags,check,this,out

current result

What I want it to be

Code

fetchData() {
  axios
    .get('/api/admin/settings/'+this.$route.params.id, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('access_token')
      }
     })
  .then(response => {
    this.form.tags.push(response.data.seo.tags) // here is my data returning to input (image #1)
  })
  .catch(function (error) {
    console.log('error', error);
  });
},

any idea?

Update

html

<el-form-item label="SEO Tags">
    <el-select
        style="width:100%"
        v-model="form.tags"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="Please input your seo tags (type + hit enter)">
    </el-select>
</el-form-item>

script

export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            site_url: process.env.MIX_APP_URL,
            form: {
                name: '',
                tagline: '',
                logo: '',
                favicon: '',
                title: '',
                tags: [],
                description: '',
                photo: '',
                _method: 'PUT',
            },
        }
    },
    created () {
        this.fetchData()
    },
    methods: {
        fetchData() {
            axios
                .get('/api/admin/settings/'+this.$route.params.id, {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('access_token')
                }
                })
            .then(response => {
                this.form.tags.push(response.data.seo.tags) // here is my data returning to input (image #1)
            })
            .catch(function (error) {
                console.log('error', error);
            });
        },
    }
}

What string function in JavaScript allows you to split a string based on some separator? Then what array operation allows you to combine two different arrays? What have you tried other the code above? — Alexander Staroselsky
– Alexander Staroselsky, Commented Feb 24, 2020 at 1:26
@AlexanderStaroselsky must of your questions i didn't understand but i'll update my question with more detail give me a min please — mafortis
– mafortis, Commented Feb 24, 2020 at 1:28
You can split a string using developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . You can combine two arrays using concat developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . Try using those two methods to solve your issue. — Alexander Staroselsky
– Alexander Staroselsky, Commented Feb 24, 2020 at 1:30
@AlexanderStaroselsky updated. also is not 2 arrays is only 1 array nothing to combine just splitting the result — mafortis
– mafortis, Commented Feb 24, 2020 at 1:31
If you split the string it becomes an array. Then it looks like data form tags is an array. So that would make two arrays. — Alexander Staroselsky
– Alexander Staroselsky, Commented Feb 24, 2020 at 1:32

Dharman · Accepted Answer · 2020-03-21 17:05:23Z

2

Try splitting the data using string split then pushing the resulting array of items:

this.form.tags.push(...response.data.seo.tags.split(','))

edited Mar 21, 2020 at 17:05

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Feb 24, 2020 at 1:35

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs push tags separately to input

Sample

Code

Update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Sample

Code

Update

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related