VUE- computed function for updating variables

Question

I try to dive deep into computed functionality of VUE.

I understand that computed runs only when the value tied into the function changes.

So I was expecting the computed function I wrote would work well. However, it runs only when the function is in 'method' hook.

Why Can I not make that happen when it is in computed?

my code is as below.

-html-

<script src="https://npmcdn.com/vue/dist/vue.js"></script>


<div id="exercise">
    <!-- 1) Show an alert when the Button gets clicked -->
    <div>
        <button @click='showalert'>Show Alert</button>
    </div>
    <!-- 2) Listen to the "keydown" event and store the value in a data property (hint: event.target.value gives you the value) -->
    <div>
        <input type="text" v-on:keyup='updatekey'>
        <p>{{ value }}</p>
    </div>
    <!-- 3) Adjust the example from 2) to only fire if the "key down" is the ENTER key -->
    <div>
        <input type="text">
        <p>{{ value }}</p>
    </div>
</div>
<script src='./app.js'></script>

app.js

new Vue({
        el: '#exercise',
        data: {
            value: ''
        },
        methods:{
            showalert(){
                alert('You just clicked')
            },

        },
        computed:{
            updatekey(e){
                this.value=event.target.value
            }

        }
    });

Are you getting any errors in browser console after using this code? — palaѕн
– palaѕн, Commented May 7, 2020 at 16:25
computed are getters/setters - in your case updatekey is undefined, to use the setter it should be something like @onEvent="updatekey=$event", dont use it like a method — Estradiaz
– Estradiaz, Commented May 7, 2020 at 16:26
Since you're only setting the value, the computed prop is better off being used as a method. — Terry
– Terry, Commented May 7, 2020 at 16:27

kiddorails · Accepted Answer · 2020-05-07 16:28:39Z

Because, computed contains the properties, something which returns a value, rather than an even handler.
Event handler are closures which should be captured inside the methods.

Have a look at sample example from Vue.js docs:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

Here, reversedMessage is used just like a normal data property in your DOM, but is infact tied to other data properties.

while in your case, updatekey is clearly a handler, which needs to make some changes or do some computations when an event is triggered.

Thank you so much!!! Super clear. especially your saying "computed contains the properties, something which returns a value, rather than an even handler." made me understand the logic super clearly. So Can I see 'computed' as something RETURNS a value which, eventually is to be used like DATA??
Exactly! They should be used that way. They are derived data properties

Collectives™ on Stack Overflow

VUE- computed function for updating variables

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related