CODEWITHSUNDEEP
vue.js
asus
asus

Reputation: 1759

Vue - calling a method inside the vue model

I am new to learning Vue and I am trying to execute a method inside my HTML like so. In React, you can bind a method to be executed in your HTML:

class Header extends Component {
    renderContent() {
           // bla...
        }
    }

render() {
    return (
        <nav>
            <div className="nav-wrapper">
                <ul className="right">
                    {this.renderContent()} // <----
                </ul>
            </div>
        </nav>
    );
}

}

I am trying to do the same in vue, but don't really know what it's called or how it's done?

<template>
  <v-toolbar fixed class="blue darken-4" dark>
    <v-toolbar-title class="mr-4">
    <span class="home"
          @click="navigateTo({name: 'root'})">
          App
      </span>
    </v-toolbar-title>
    <v-toolbar-items>
      <v-btn flat dark>

      </v-btn>
    </v-toolbar-items>
    <v-spacer></v-spacer>

    <v-toolbar-items>
      {{ this.renderContent}}

      <!--<v-btn @click="navigateTo({name: 'register'})" flat dark>-->
        <!--Sign Up-->
      <!--</v-btn>-->
    </v-toolbar-items>

  </v-toolbar>
</template>

<script>

  export default {
    methods: {
      navigateTo (route) {
        this.$router.push(route);
      },

      renderContent() {
         // bla...
      }
    }
  }
</script>

how do I called renderContent() inside my HTML in vue?

Upvotes: 0

Views: 322

Answers (1)

ddprrt
ddprrt

Reputation: 7584

You are close! You don't need the this keyword in templates, the templates are aware of their context. So something like this works:

HTML

<div id="app">
  {{ renderContent() }}
</div>

JS

new Vue({
  el: "#app",
  methods: {
    renderContent: function() {
        return ':-)'
    }
  }
})

Upvotes: 1

Related Questions