Solution 1 :

You can try this,

new Vue({
  el: '#app',
  data: {
    dynamicVariable: 'Hello Vue.js!'
<script src=""></script>

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

Solution 2 :

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>

Problem :

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?


Comment posted by Seegy

@ricristian has a cleaner solution using string interpolation though.