0
103
ViewsModelar atributos personalizados CRUD con vue/vuetify
Un objeto comercial de back-end contiene una estructura de datos de atributos personalizados que permite al cliente agregar pares clave/valor para la persistencia en la base de datos. Por ejemplo: Map<String, String> customAttributes;
Ejemplo de interfaz de usuario: (con la capacidad de agregar filas adicionales) 
Dentro de la función de datos de vue, tengo un marcador de posición para estos datos:
data() { return { customAttributes: {}, ... } Pero no puedo encontrar una manera de vincular las entradas de la interfaz de usuario al objeto customAttributes de modo que agregar una nueva fila (atributo) agregue una clave y un valor correspondientes.
¿Hay una forma alternativa de manejar esto?
1 answers
Answer question0
No usaría un Map para esto, ya que Vue tendrá dificultades para rastrear las claves de los objetos si se pueden modificar fácilmente. Parece más apropiado usar algo como Array<{ key: string, value: string }>
Si necesita la versión del mapa , puede calcularla fácilmente desde la matriz
const model = { key: "", value: "" } new Vue({ el: "#app", data: () => ({ attributes: [{ key: "GRADLE_HOME", value: "/usr/local/gradle" }, { key: "JAVA_HOME", value: "/usr/lib/jvm/whatever" }] }), computed: { attributeMap: ({ attributes }) => Object.fromEntries(attributes.map(({ key, value }) => [ key, value ])) }, methods: { add () { this.attributes.push({...model}) }, del (index) { this.attributes.splice(index, 1) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> <table border="1"> <thead><tr><th>Name</th><th>Value</th></tr></thead> <tbody> <tr v-for="(attr, index) in attributes" :key="index"> <td><input v-model="attr.key"/></td> <td> <input v-model="attr.value" /> <button @click="del(index)">×</button> </td> </tr> </tbody> <tfoot> <tr><td colspan="2"><button @click="add">Add Attribute</button></td></tr> </tfoot> </table> <pre>attributeMap = {{ attributeMap }}</pre> </div>