vuejs dynamically binding a name attribute to point to a target-CodePudding

I am trying to accomplish the ability to dynamically link to anchor points but the name would come from the v-model. I am using vuejs 2.5 and I want to bind name v-bind:href to point to the designated information so it basically would jump to it if there is a lot of information..I need to do it dynamically because in reality it would be a lot of data. Can someone properly show me how to jump to it if the target would come from the v-model?? Not sure where the # would go or if it is still needed.

new Vue({
  el: "#app",
  data: {
  name:'Girl',
  Modules:['one','two','three','four']

  },
  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">
  <h2>Binding:</h2>
  
  <li v-for="mod in Modules">
    <a href="#mod">{{ mod}}</a><br>
 </li>
 <br>
 <br>
 <a v-bind:name="mod">This person One</a><br>
 
<a v-bind:name="mod">This is a person Two</a><br>

<a v-bind:name="mod">This is a person Three</a><br>
</div>

CodePudding user response：

You would want to use template literals inside your bindings, which is actually noted in the Vue docs here. With them you can add dynamic information to your bindings.

<li v-for="(mod, index) in Modules">
    <a :href="`#mod${index}`">{{ mod }}</a><br>
</li>

and then same with the name binding of each anchor point