How do i bind the identifer to the url without making the data model a function-CodePudding

I have been fiddling with binding a hyperlink to my project, but I do not want to make my model a function. I simply want to bind the identifier so that if clicked, it will go to the proper url. Any insight would be great!

new Vue({
  el: "#app",
  data: {
    generatedData: "Identifier": "1002", "Name": "some name",
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

<p v-if="generatedData">The site location is here:
<a v-if="generatedData" href="https://yahoo.com/home/{{generatedData.Identifier}}">https://yahoo.com/home/{{generatedData.Identifier}}</a></p>

</div>

CodePudding user response：

If I understood you correctly:

new Vue({
  el: "#app",
  data() {
    return {
      generatedData: {"Identifier": "1002", "Name": "some name"},
    }
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-if="generatedData">The site location is here:
    <a v-if="generatedData" :href="'https://yahoo.com/home/' generatedData.Identifier">
      https://yahoo.com/home/{{generatedData.Identifier}}
    </a>
  </p>
</div>