vuejs dynamically binding a name attribute to point to a target

Question

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>

yoduh · Accepted Answer · 2022-08-29 01:44:31Z

1

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

answered Aug 29, 2022 at 1:44

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vzupo Over a year ago

can you show how the name binding would look also

yoduh Over a year ago

with your current code, since you're not dynamically adding new anchors you would set the anchor name manually. <a v-bind:name="mod1">, <a v-bind:name="mod2">, etc. I don't know what a "Person" object or array looks like in your app so I don't have a suggestion on how you should dynamically render those. If they're sorted in the same order as the Modules array you could get away with just using another index value: <a v-bind:name="`mod${index}`">.

Collectives™ on Stack Overflow

vuejs dynamically binding a name attribute to point to a target

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related