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 ?

tony19 · Accepted Answer · 2022-07-16 00:35:34Z

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.

edited Jul 16, 2022 at 0:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 26, 2018 at 14:25

i--

4,3702 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue computed and methods have different behavior when called

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related