How to create a link with Vue in the <a> tag?

Asked

Viewed 909 times

0

The link does not get the correct content, see code

  var app = new Vue({
    el: '#app',
    data: {
      data: [
      
      {
      
        url: "http://globo.com"
      },
         {
      
        url: "http://uol.com"
      },
         {
      
        url: "http://sbt.com"
      },
      ],
      isInsert: true,
      isLoad: false,
      Boleto: {
        parcela: null,
        due_date: null,
        amount: null,
        status: null,
        paid_amount: null,
        url: null
      }
    },
    created: function() {
     

    },
    filters: {
   

    },
    methods: {

    }
  })
table, tr, td

{

border:1px solid #ccc;
padding: 1em

}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>



<div id="app">


  <div v-if=!isLoad>


    <div class="">
      <div class="table-responsive">
        <table class="table table-head-solid">

          <thead>
            <tr>

              <th>URL</th>

            </tr>
          </thead>

          <tr v-for="row in data">
             <td>
             <a href={{row.url}}>Link</a>
            </td>
            
          </tr>

        </table>
      </div>
    </div>

  </div>

</div>

vue.js

  • What do you need? I don’t understand your question

  • The correct is: <a :href="row.url">Link</a>

1 answer

2


According to the documentation of Vuejs, attributes do not work with keys {{ }}. To make an attribute dynamic, you need to use the directive v-bind (or simply :attribute).

Example:

var app = new Vue({
    el: '#app',
    data: {
      isLoad: false,
      data: [{
        url: "http://globo.com"
      },
      {
        url: "http://uol.com"
      },
      {
        url: "http://sbt.com"
      }]
    }
  })
table, tr, td { border:1px solid #ccc; padding: 1em }
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <div v-if=!isLoad>
    <div class="">
      <div class="table-responsive">
        <table class="table table-head-solid">
          <thead>
            <tr>
              <th>URL</th>
            </tr>
          </thead>

          <tr v-for="row in data">
             <td><a :href="row.url">Link</a></td>
             <!-- Alternativa abaixo -->
             <!-- <td><a v-bind:href="row.url">{{ row.url }}</a></td> -->
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

  • attributes do not work*

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.