[Vuejs]-[Vue warn]: Property or method "first" and "last" is not defined

by

1👍

When you are using data properties, or calling methods in your template you don’t need to use this, so your code for first and last names here should be like this.

 <ul> 
   <li class="output1">First name: {{first}} </li>
   <li class="output1">Last name: {{last}} </li>
 </ul>

https://v2.vuejs.org/v2/guide/syntax.html

Also you have a problem with how you are defining your data object in your main Vue instance. In the main instance it should not be a function.

<script>
var app = new Vue({
  el: '#app',
  data :{
    first: "Taran",
    last: "Basi"
  },
  methods: {
     giveName: function() {
       return this.first
     }
    }
})
</script>

When defining data in a component is when you define it as a function. https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

<!-- for components data must be a function -->
data(){
   return {}
}
👤skribe

Leave a comment