CODEWITHSUNDEEP
vue.jsattributes
user9223748
user9223748

Reputation:

vuejs pass data-* attribut + text

I need pass in data-title text "Get presentation [name]"

Works: <a href="#popup-form" class="plan-btn" :data-title="hous.text">Get</a> However I need as well pass "Get presentation"

Does not work: <a href="#popup-form" class="plan-btn" :data-title="Get presentation hous.text">Get</a>

Upvotes: 0

Views: 105

Answers (1)

Reinhard Schnetzinger
Reinhard Schnetzinger

Reputation: 194

In Vue.js all data bindings (like your :data-title) support JavaScript expressions. As in plain JavaScript you can concat strings with the "+" Operator; like that:

<a href="#popup-form" class="plan-btn" :data-title="'Get presentation ' + hous.text">Get</a>


However, it is advisable to use a computed property in such a case:

<template>
  <a href="#popup-form" class="plan-btn" :data-title="dataTitle">Get</a>
</template>

<script>
export default {
    computed: {
        dataTitle() {
            return 'Get presentation ' + this.hous.text;
        }
    }
}
</script>

Upvotes: 1

Related Questions