I'm a Ruby guy who is trying to get some Vue knowladge. In my projecy user can provide multiple styleCodes via input field - each of the styleCode is separated by a comma. I want to store this styleCodes in array to calculate its length freely. I've below:
<template>
<form>
<input type="text" v-model="tempStyleCodes">
</form>
<button
type="button"
@click="syncProducts"
>
Sync
</button>
</template>
<script>
export default {
name: 'SyncProducts',
data() {
return {
styleCodes: [],
tempStyleCodes: '',
}
},
computed: {
productsToSyncAmount () {
this.tempStyleCodes.split(',')
this.styleCodes.push(this.tempStyleCodes)
return this.styleCodes.length
}
},
methods: {
async syncProducts() {
let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`
this.loadId = null
if (this.productsToSyncAmount === 0) {
ModalController.showToast('', 'Type product codes for sync first, please!', 'warning')
}
// (...) some ohter irrelevant code
},
}
}
I think I'll need something similar to Ruby method .split(',') because my code for sample input of 4321test, test, 908test produces:
styleCodes: [ "4321test, test, 908test" ]
Where length will give me 1 element instead of 3.
So desired result should be:
styleCodes: [ "4321test", "test", "908test" ]
How to split these values?
as you are using the split function to check the length of the string i assume your issue isn't how to split the value but how to bind to it
in which case i suggest use a writable computed value
computed: {
formattedStyleCodes :{
get(){
return this.styleCodes.join(",");
},
set(value){
this.styleCodes= value.split(',');
}
}
},
you can then bind to it as
<input type="text" v-model="formattedStyleCodes ">
You can use String's split() method, which can take either a string or a regular expression as the separator.
const codes = this.tempStyleCodes.split(/\s*,\s*/);
Now that you have an array of codes, you can push all of them in styleCodes by using the spread syntax (see browser compatibility) which is accepted by Array's push() method:
this.styleCodes.push(...codes);
Example:
const styleCodes = [];
const tempStyleCodes = "4321test, test, 908test";
const codes = tempStyleCodes.split(/\s*,\s*/);
styleCodes.push(...codes);
console.log(styleCodes);watch: {
tempStyleCodes(newVal){
if(newVal) this.styleCodes = newVal.split(',')
}