Cómo agregar atributos dinámicamente en VueJs

Solución:

Puede vincularlo a una variable usando v-bind:disabled="foo" o :disabled="foo" para abreviar:

<textfield label="Name" value.sync="el.name" :disabled="myVar">

Luego, en Vue puedes configurar this.myVar = true y deshabilitará la entrada.

Editar: agregue esto a su plantilla:

<template>
  <input type="text" :disabled="disabled" placeholder="{{ placeholder }}" v-model="value">
</template>

En base a una condición, podemos definir o cambiar atributos en vue.

Consulte el documento oficial para obtener el mismo https://vuejs.org/v2/guide/syntax.html#Attributes

Estoy tratando de averiguar cómo establecer el atributo de las etiquetas html del valor de la matriz de forma dinámica cuando utilizo el bucle Vue v-for.

Lo que voy a mostrar:

Ejemplo

1. Hay 3 elementos div con diferentes colores de fondo del valor de la matriz (no estático).

2. Cada div tiene una etiqueta de entrada y cambia el valor cuando el valor de entrada del usuario

   • La entrada del primer div convierte minúsculas a mayúsculas.
   • el segundo representa el estado de ánimo, si ingresa ‘feliz’, presente ‘bueno’. si ingresa ‘triste’, la salida es ‘mala’
   • La tercera entrada div duplica el valor de entrada.

   {{box.outputData}} Caja redondeada

   new Vue({
    el: "#app",
     data: {
       isRounded: false,
         boxes: [
           {
             inputData: "",
             outputData: "",
             color: "green",
             operation: "uppercase"
           },
           {
             inputData: "",
             outputData: "",
             color: "red",
             operation: "feeling"
           },
           {
             inputData: "",
             outputData: "",
             color: "blue",
             operation: "multiple"
           }
         ],
         feeling: {
           good: ["happy", "joyful", "calm"],
           bad: ["sad", "mad", "depressed"]
         }
     },
     methods: {
       toggle: function(todo){
           todo.done = !todo.done
       }
     },
     watch: {
       boxes: {
         deep: true,
         immediate: true,
         handler: function(val) {
           this.boxes.map(box => {
             if (box.operation === "uppercase")
               box.outputData = box.inputData.toUpperCase();
             else if (box.operation === "feeling") {
               box.outputData = this.feeling.good.includes(box.inputData)
                 ? "GOOD"
                 : this.feeling.bad.includes(box.inputData)
                 ? "BAD"
                 : "";
             } else if (box.operation === "multiple") {
               if (box.inputData == "") box.outputData = "";
               else box.outputData = parseInt(box.inputData) * 2;
             }
           });
         }
       }
     },
     mounted() {
       for (var i = 0; i < this.numBox; i++) {
         this.boxValue[i] = "";
         this.bxData[i] = "";
       }
     },
   })
   
   
   
   .clearfix{
    clear: both;
   }
   .full-width{
     width:100%;
   }
   input {
     background: transparent;
     text-decoration: underline;
     color: white;
     border: none;
     text-align: center;
     font-size:30px;
   }
   .box {
     float:left;
     color: white;
     width: 24%;
     margin-right: 1%;
     padding: 20px;
     background: blue;
     height: 100px;
   }
   .box-output {
     width: 100%;
     text-align: center;
     font-size:30px;
   }
   .box-rounded {
     border-radius: 50px;
   }
   

---

---

Utiliza Nuestro Buscador