Soy un tipo de Ruby que está tratando de obtener algunos conocimientos de Vue. En mi proyecto, el usuario puede proporcionar múltiples styleCodes de estilo a través del campo de entrada; cada uno de los códigos de estilo está separado por una coma. Quiero almacenar estos styleCodes de estilo en una matriz para calcular su longitud libremente. Tengo a continuación:
<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 }, } } Creo que necesitaré algo similar al método Ruby .split(',') porque mi código para la entrada de muestra de 4321test, test, 908test produce:
styleCodes: [ "4321test, test, 908test" ]Donde la longitud me dará 1 elemento en lugar de 3.
Entonces el resultado deseado debería ser:
styleCodes: [ "4321test", "test", "908test" ]¿Cómo dividir estos valores?
como está utilizando la función de división para verificar la longitud de la cadena, supongo que su problema no es cómo dividir el valor sino cómo vincularlo
en cuyo caso sugiero usar un valor computado escribible
computed: { formattedStyleCodes :{ get(){ return this.styleCodes.join(","); }, set(value){ this.styleCodes= value.split(','); } } },luego puedes unirte a él como
<input type="text" v-model="formattedStyleCodes ">Puede usar el método split() de String , que puede tomar una cadena o una expresión regular como separador.
const codes = this.tempStyleCodes.split(/\s*,\s*/); Ahora que tiene una serie de códigos, puede insertarlos todos en styleCodes usando la sintaxis extendida (ver compatibilidad del navegador ) que es aceptada por el método push() de Array :
this.styleCodes.push(...codes);Ejemplo:
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(',') }