How to use an attribute selector with vue.js?

Question

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>

CD.. · Accepted Answer · 2017-01-24 12:57:57Z

2

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>

answered Jan 24, 2017 at 12:57

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WoJ Over a year ago

Thank you. I was so focused on my code that I did not realise that in the example I forgot to pass background-color at all...

Saurabh · Accepted Answer · 2017-01-24 12:55:42Z

1

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.

answered Jan 24, 2017 at 12:55

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

2 Comments

WoJ Over a year ago

This is true, my example was to a minimal one to just have the styles applied. In reality passwordStyle will be computed based on a complex set of rules, using other elements of the vm data variables.

Saurabh Over a year ago

@WoJ Can you add that use case in little more detail.

Collectives™ on Stack Overflow

How to use an attribute selector with vue.js?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related