How to add dynamically attribute in VueJs

I'm using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my Textfield component :

    <template>
     <input type="text" placeholder="{{ placeholder }}" v-model="value">
    </template>
    <script>
    export default  {
      props: {
       disabled: {type: Boolean, default: false},
       placeholder: {type: String, default: ""},
       value: {twoWay: true, default: ""}
      }
     }
    </script>

Usage :

<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>

Answers:

Answer

You can bind it to a variable using v-bind:disabled="foo" or :disabled="foo" for short:

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

Then in Vue you can just set this.myVar = true and it will disable the input.

Edit: add this to your template:

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

I am trying to figure out how to set the attribute of the html tags from the array value dynamically when using the Vue v-for loop.

What I am going to show:

Example

  1. There are 3 div elements with different background colors from array value(not static).
  2. Each divs have a input tag and change the value when the user input value

    • The first div's input converts lowercase to uppercase.
    • second represents the mood, if enter 'happy', present 'good'. if enter 'sad', output 'bad'
    • The third div input doubles the input value.
    {{ box.outputData }} Rounded Box
    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;
    }
    
Answer

base one condition we can define or change attributes in vue

Please refer official document for the same https://vuejs.org/v2/guide/syntax.html#Attributes

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.