How to Bind the HTML <Title> Content in Vuejs

How can I bind the html title content in vuejs?

There are essentially two ways to solve it.

Use an existing Package

For example, vue-meta:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    metaInfo: {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: 'Default Title',
      // all titles will be injected into this template
      titleTemplate: '%s | My Awesome Webapp'
    }
  }
</script>

Create your own Component

Create a vue file containing:

<script>
    export default {
        name: 'vue-title',
        props: ['title'],
        watch: {
            title: {
                immediate: true,
                handler() {
                    document.title = this.title;
                }
            }
        },
        render () {
        },
    }
</script>

import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);

Then you can use it in your templates, e.g.

<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>

Dynamically binding title tag in vuejs

Use a computed property.

computed: {
  title: {
    get() {
      document.title = this.remaining
      return this.remaining
    },
    set(val) {
      document.title = val
    }
  }
}

You don't need to use <title>{{title}}</title>. If you change title in your Vue, it will be applied automatically to the page.

Also, you should not bind a Vue instance to html, head or body tags. Use regular elements only like <div id="app"></div> and set your Vue el: '#app'

Or you could use this:

data: {
  title: '',
},
watch: {
  title(val) {
    document.title = val
  }
}

Update:
While the code above can solve your problem. I created this tiny vue-title component that can be used in your project easily.

Example:

<vue-title>{{title}}</vue-title>

How to bind v-for values to HTML attributes in Vue

your title binding should have double quotes before and after the expression, and it seems that you want a string interpolation in title, but I don't think it will work.

try this (you can ommit v-bind cus : its a shorthand for it)

<label v-for="hashtag in hashtags"  :title="'You can filter with ' + hashtag" :data-value="hashtag">
   {{ hashtag }}
</label>

https://jsfiddle.net/5sqs5fsq/

VueJs, Template, v-bind, embeded html

I was running a test, and came back to see the added comment about removing the <template> tag, which I agree with.

However, you also have a problem in that you are trying to bind myName to a <div> tag name attribute, which doesn't exist. Use handle bars instead.

Here is the working code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Template and v-bind</title>
</head>

<body>
  <!-- Div to Mount App -->
  <div id="app"></div>

  <!-- Reference to Vue.js library -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Script Element for our App -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myName: 'Cool Name'
      },
      template: `
                <div>
                    <div>{{ myName }}</div> 
                </div>`

    });
  </script>

</body>

</html>

How to change page titles when using vue-router?

You can use a navigation guard with the router definition:

import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    // Use next tick to handle router history correctly
    // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
    Vue.nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

You'll need to change your export to:

const router = new Router({ ... });
...
export default router;

Or you can use an immediate watcher on your root component:

export default {
    name: 'App',
    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                document.title = to.meta.title || 'Some Default Title';
            }
        },
    }
};

Unable to bind text to href attribute in VueJS template

In attributes you have to indicate props or JS-expressions directly without mustaches:

<a :href="url">{{ post.title }}</a>

How can I pass in rendered HTML to a vue property?

You could pass a dynamically generated HTML. If it is just a simple case, you could even do it inline with a template string:

  <md-dialog-confirm
    :md-active="true"
    md-title="Make an Outboud Call"
    md-confirm-text="Agree"
    md-cancel-text="Disagree"
    :md-content="`some text with the value <b>${yourVariable}</b> here`"
    @md-cancel="$emit('closeModal')"
    @md-confirm="$emit('accept')"
  >

Note the : in front of md-content which is the shorthand for v-bind.