Vue computed and methods have different behavior when called

Question

I have follow codes, which is a router component

const tag_cloud_links = {
  template:
  `
  <div class="tag-cloud-links">
    <router-link v-for="(value,key) in tags"
      :key="value.date"
      :to="{name:'tags',params: getBase(value)}">
      {{ key }}
    </router-link>
  </div>
  `
  ,
  computed: {
    getBase(value){
      return value.path.slice(6,value.path.length - 1)
    }
  },
  props:{
    tags:Object
  }
};

when I try debug getBase(value)

as you can see, value is a vue instance

when I go back stack to follow

value is correct object which is what I want to pass to getBase,

But why when vue call computed function, params change to vue instance?

When I change computed to methods

  methods: {
    getBase(value){
      return value.path.slice(6,value.path.length - 1)
    }
  },

value is corrent object, not is vue instance anymore

Why have difference params between computed and methods ?

Answer 1

I believe you can only set computed properties via getter/setter syntax. Otherwise, computed "methods"/properties should not have any arguments. They are served as quick reactive accessors and called without parentheses in a template, btw. In your case you clearly need to use method, and not a computed property. Read more about Vue's computed properties.