VUE - вычисляемая функция обновления переменных - PullRequest
Новая
       4

VUE - вычисляемая функция обновления переменных

0 голосов
/ 07 мая 2020

Я пытаюсь глубоко погрузиться в вычисляемую функциональность VUE.

Я понимаю, что вычисление выполняется только тогда, когда значение, привязанное к функции, изменяется. Я написал, будет хорошо. Однако он запускается только тогда, когда функция находится в обработчике 'method'.

Почему я не могу сделать это, когда он вычисляется?

мой код выглядит следующим образом.

- 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>

прим. js

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

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

        }
    });

1 Ответ

4 голосов
/ 07 мая 2020

Потому что computed содержит properties, что-то, что возвращает значение, а не четный обработчик.
Обработчик событий - это замыкания, которые должны быть захвачены внутри methods.

Взгляните на образец примера из 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>

Здесь reversedMessage используется так же, как обычное свойство data в вашей модели DOM, но фактически привязано к другим свойствам данных.

в то время как в вашем случае updatekey явно является обработчиком, которому необходимо внести некоторые изменения или выполнить некоторые вычисления при срабатывании события.

...