Adding a Vue Element to Hyperlink

Question

I have my Vue element props.item[hdr.value] which is changable. I print this to my webpage using {{ props.item[hdr.value] }}, but I am unsure how to use this value to create a dynamic title tag to mu link:

<a @click="testFunc()" title="More on %%%">{{ props.item[hdr.value] }}</a>

I have tried ' ', + +, { }, {{ }} and various combinations around the call (and numerous Google searches) but I just cannot seem to find he rights syntax to get this to display.

Can anyone help out here please?

ricristian · Accepted Answer · 2021-09-06 07:14:50Z

2

You can try this,

new Vue({
  el: '#app',
  data: {
    dynamicVariable: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <a @click="testFunc()"  :title="`More on ${dynamicVariable}`">{{ dynamicVariable }}</a>
</div>

answered Sep 6, 2021 at 7:14

ricristian

5344 silver badges19 bronze badges

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

Comments

Dustin Cook · Accepted Answer · 2021-09-23 06:57:11Z

0

After some work I got the solution, it is a derivative of the answer posted by @ricristian

<a @click="testFunc()" :title="'More on ' + props.item[hdr.value]"></a>

edited Sep 23, 2021 at 6:57

answered Sep 6, 2021 at 15:31

Dustin Cook

1,3055 gold badges26 silver badges45 bronze badges

1 Comment

Seegy Over a year ago

@ricristian has a cleaner solution using string interpolation though.

Collectives™ on Stack Overflow

Adding a Vue Element to Hyperlink

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related