Tag losing attributes in quasar framework + vue.js 2

[anonimo]

I’m having problems with the quasar framework + vue.js 2 I have a pretty simple component that basically is a link with an an icon inside, but many of these attributes are dynamic. After I started passing the href and target attribute via v-bind the component no longer respects the css part of tag a on. From what I’ve noticed it seems that for some reason the a tag is overwritten and loses the settings leaving only the href attribute.

Here is the code:

<template>
  <div :id="_uid" class="social">
    <a :href="styles.url" :target="styles.target" :style="{color: styles.color}" >
      <i :class="['icone', styles.classIco]"></i>
    </a>
  </div>
</template>

<script>
  import css from '../../assets/js/cssDefault.js'
  export default{
    props: {
      styles: {
        type: Object,
        required: false,
        default: function () {
          return {
            url: '#',
            target: '_blank',
            color: css.color.secondary,
            classIco: 'ico-fa-question-sign'
          }
        },
        validator: function (styles) {
          let s = {
            url: {
              tipo: 'string',
              padrao: '#'
            },
            target: {
              tipo: 'string',
              padrao: '_blank'
            },
            color: {
              tipo: 'string',
              padrao: css.color.secondary
            },
            classIco: {
              tipo: 'string',
              padrao: 'ico-fa-question-sign'
            }
          }
          for (let prop in styles) {
            let tipo = typeof styles[prop]
            if (!(prop in styles) || tipo !== s[prop].tipo) {
              styles[prop] = s[prop].padrao
            }
          }
          return styles
        }
      }
    }
  }
</script>

<style scoped>
  .social{
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
  }
  .social>a,
  .social>a:active,
  .social>a:visited{
    margin-left: 5.6px;
  }
  .social>a:hover{
    cursor: pointer;
  }
  .icone{
    margin: 0 3.5px;
  }
  .icone::before{
    font-size: 14px;
  }
</style>

[rstoenescu]

This is a pure Vue related question. Nothing from Quasar side has any impact on your code. You may want to move this to the Vue forum.
Do you really need the “scope” added to the <style> tag? That might mingle with vue-loader’s output code.

[anonimo]

In the case of scoped, it makes no difference to me, I just want it to work.
Detail: is quasar version 0.13.
I’m new to both technologies, so maybe the mess.

[rstoenescu]

Again, has nothing to do with Quasar. Try in Vue forums for this.