CODEWITHSUNDEEP
javascripthtmlcssvue.js
WoJ
WoJ

Reputation: 29967

How to use an attribute selector with vue.js?

I would like to apply a computed style to an input form. The documentation explains how to do that, but only for simple styles.

I need to apply the equivalent of

input[type="text"], textarea {
  background-color : red; 
}

but it is not clear for me how to convey the [type="text"] bit.

Using it verbatim does not work:

var vm = new Vue({
  el: "#root",
  data: {
    password: '',
  },
  computed: {
    passwordStyle: function() {
      var style = {}
      style['input[type="text"]'] = 'red';
      style['textarea'] = 'blue';
      return style;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="root>">
  <input type="text" name="password" autofocus="true" v-bind:style='passwordStyle'>
</div>

Upvotes: 3

Views: 1232

Answers (2)

CD..
CD..

Reputation: 74096

You need to only pass the style, not the css selector, like:

var vm = new Vue({
  el: "#root",
  data: {
    password: '',
  },
  computed: {
    passwordStyle: function() {
      return {
        backgroundColor: 'red'
      };
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="root">
  <input type="text" name="password" autofocus="true" :style="passwordStyle">
</div>

Upvotes: 2

Saurabh
Saurabh

Reputation: 73609

Can you explain your use-case little bit elaborately, use of v-bind:style is when you want to dynamically change the style of some element, depending on some variable, as it is in docs, following code with change the CSS depending on isActive and hasError variable:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

I don't see in your code you are changing style based on any variable.

Upvotes: 1

Related Questions