web-dev-qa-db-fra.com

Comment ajouter un attribut dynamique dans VueJs

J'utilise vuejs et je veux savoir comment contrôler les entrées (ajoutez un attribut disabled si nécessaire). Est-il possible d'ajouter dynamiquement attribut dans vuejs? Au-dessous de mon composant Textfield : 

    <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>

Utilisation :

<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>
javascriptvue.jsdynamicvue-component
29
Maria Minh

Vous pouvez le lier à une variable en utilisant v-bind:disabled="foo" ou :disabled="foo" en abrégé:

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

Ensuite, dans Vue, vous pouvez simplement définir this.myVar = true et désactiver l'entrée.

Modifier: ajoutez ceci à votre modèle:

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

baser une condition, nous pouvons définir ou modifier les attributs en vue 

Veuillez vous référer au document officiel pour la même chose https://vuejs.org/v2/guide/syntax.html#Attributes

0
Pankaj Rupapara