use computed instead of methods when possible

src/components/status_action_buttons/status_action_buttons.js

@@ -233,14 +233,12 @@ const BUTTONS = [{
     Object.entries(button).map(([k, v]) => [k, typeof v === 'function' ? v : () => v])
   )
 })
-console.log(BUTTONS)
 
 const StatusActionButtons = {
   props: ['status', 'replying'],
   emits: ['toggleReplying'],
   data () {
     return {
-      buttons: BUTTONS,
       showingConfirmDialog: false,
       currentConfirmTitle: '',
       currentConfirmOkText: '',
@@ -251,6 +249,24 @@ const StatusActionButtons = {
   components: {
     ConfirmModal
   },
+  computed: {
+    buttons () {
+      return BUTTONS.filter(x => x.if(this.funcArg))
+    },
+    funcArg () {
+      return {
+        status: this.status,
+        replying: this.replying,
+        emit: this.$emit,
+        dispatch: this.$store.dispatch,
+        state: this.$store.state,
+        getters: this.$store.getters,
+        router: this.$router,
+        currentUser: this.$store.state.users.currentUser,
+        loggedIn: !!this.$store.state.users.currentUser
+      }
+    }
+  },
   methods: {
     doAction (button) {
       this.doActionReal(button)
@@ -269,19 +285,6 @@ const StatusActionButtons = {
         return 'button'
       }
     },
-    funcArg () {
-      return {
-        status: this.status,
-        replying: this.replying,
-        emit: this.$emit,
-        dispatch: this.$store.dispatch,
-        state: this.$store.state,
-        getters: this.$store.getters,
-        router: this.$router,
-        currentUser: this.$store.state.users.currentUser,
-        loggedIn: !!this.$store.state.users.currentUser
-      }
-    },
     getClass (button) {
       return {
         [button.name() + '-button']: true,

src/components/status_action_buttons/status_action_buttons.vue

@@ -4,7 +4,7 @@
       <span
         class="quick-action"
         v-for="button in buttons"
-        :key="button.name()"
+        :key="button.name"
       >
         <component
           :is="component(button)"
@@ -12,24 +12,24 @@
           :class="getClass(button)"
           role="button"
           :tabindex="0"
-          :title="$t(button.label(funcArg()))"
+          :title="$t(button.label(funcArg))"
           @click.stop="component(button) === 'button' && doAction(button)"
-          :href="component(button) == 'a' ? button.link?.(funcArg()) || getRemoteInteractionLink : undefined"
+          :href="component(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
         >
           <FALayers class="fa-old-padding">
             <FAIcon
               class="fa-scale-110"
-              :icon="button.icon(funcArg())"
+              :icon="button.icon(funcArg)"
             />
-            <template v-if="button.toggleable?.(funcArg()) && button.active">
+            <template v-if="button.toggleable?.(funcArg) && button.active">
               <FAIcon
-                v-show="!button.active(funcArg())"
+                v-show="!button.active(funcArg)"
                 class="focus-marker"
                 transform="shrink-6 up-9 right-17"
                 icon="plus"
               />
               <FAIcon
-                v-show="button.active(funcArg())"
+                v-show="button.active(funcArg)"
                 class="focus-marker"
                 transform="shrink-6 up-9 right-17"
                 icon="times"
@@ -39,9 +39,9 @@
         </component>
         <span
           class="action-counter"
-          v-if="button.counter?.(funcArg()) > 0"
+          v-if="button.counter?.(funcArg) > 0"
         >
-          {{ button.counter?.(funcArg()) }}
+          {{ button.counter?.(funcArg) }}
         </span>
       </span>
     </span>