web-dev-qa-db-fra.com

vue.js Donner une valeur à un href dans un <a> tag

Cela semble idiot mais je ne trouve pas le moyen de transmettre une donnée variable définie dans le href:

ComponentFile.vue j'ai essayé tous ceux:

<a href=" url ">{{ url }}</a>
<a href=" {{ url }}">{{ url }}</a>
<a href=" {{ url }}">{{ url }}</a>
<a v-bind:href="url">{{ url }}</a>
<a @click=" url " v-bind:href="url"> {{ url }}</a>


...
export default {
        data() {
                   url: 'http://anywhere.com'
  }
}

Quelle est la bonne façon?

Merci!

javascripthtmllaravelvue.js
5
commandantp

Vous avez défini data() comme une fonction, mais elle ne renvoie rien. Il devrait retourner un objet avec les données comme ceci:

export default {
    data() {
        return {
            url: 'http://anywhere.com'
        }
    }
}

Ensuite, l'un ou l'autre fonctionnera:

<a href="{{url}}">{{ url }}</a>
<a v-bind:href="url">{{ url }}</a>

EDIT FOR VUE 2:

L'interpolation de variables dans les attributs n'est plus recommandée. Changement:

<a href="{{url}}">{{ url }}</a>

Pour l'un d'entre eux:

<a :href="url">{{ url }}</a>
<a v-bind:href="url">{{ url }}</a>
17
Jeff

Essaye ça:

<div id="app">
   <a href="{{ url }}">{{ url }}</a>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app', // Vue.js will just work inside the div with id of app
    data: {
      url: 'http://anywhere.com' 
    }
  });
</script>
1
Rafael Ferreira