input value in vuejs using css :not[value=""]

Question

I'm using Bootstrap-Vue in a VueJS project, and it's being impossible using a class..

I have the next input

<div class="input__wrapper">
   <b-form-input
     v-model="idOrNameSelected"
     class="textfield"
     :class="{'input--empty': idOrNameSelected != null}"
     @keydown.enter.native="onSubmit" />
     <label
       class="input__label">Service id or name</label>
</div>

In my script section I defined idOrNameSelected like:

data () {
    return {
      idOrNameSelected: ''
    }
  }

In my scss file I have a rule like

&:focus ~ .input__label,
&:not([value=""]) ~ .input__label {
  top: 8px;
  pointer-events: none;
}

And when I put any text in my input never is using this css rule, why?????

Thanks

Answer 1

@dev-cyprium is correct regarding Vue not placing the attribute value on the input element when using v-model (value is actually a domProp on the element)

There is a trick you can do with data attributes though:

<template>
  <div>
    <b-form-input id="the-input" v-model="value" :data-value="value"></b-form-input>
    <label for="the-input">Hello World</label>
  </div>
</template>

<style>
  input.form-control ~ label {
    color: red;
  }
  input.form-control[data-value=""] ~ label {
    color: blue;
  }
</style>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>