it-roy-ru.com

Как изменить значение данных Vue.js в методе, вызванном событием DOM?

Отказ от ответственности: я знаю, что в Vue.js. существует привязка данных.

Итак, у меня есть это:

<html>
<body>

    <div id="app">
        <input @input="update">
    </div>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">

        new Vue({

            el: '#app',

            data: {

                info: '',

            },

            methods: {

                update: function (event) {

                    value = event.target.value;

                    this.info = value;
                    console.log(value);

                }

            }

        });

    </script>

</body>
</html>

Вход, который будет вызывать метод с именем update каждый раз, когда пользователь вводит что-то. Идея заключается в том, чтобы изменить значение свойства данных с именем info на значение, введенное пользователем.

Но по какой-то причине значение атрибута данных не меняется. Текущее значение ввода обычно выводится на консоль при вызове console.log(value) каждый раз, когда вызывается метод update, но в атрибуте info ничего не меняется.

Итак, как заставить это работать?

6
Artenes Nogueira

Проблема в том, что я смешал два разных контекста.

В другом сценарии я делал то же самое, но вход был привязан к другому js cript, который применял к нему маску. Это вызвало проблему с изменением значения info.

Затем я попытался воспроизвести проблему в этом сценарии в вопросе (без сценария маски js), а затем подумал, что в атрибуте info ничего не изменилось, поскольку расширение chrome для Vue.js показало мне, что значение не изменилось , всегда оставалось пустым, независимо от того, сколько я набрал на входе (так что, возможно, проблема среды).

В конце концов, это была просто ошибка с моей стороны, и настоящая проблема заключается в связывании двух разных библиотек в одном входе. В конце концов один из них не будет работать, и это содержание для другого вопроса.

2
Artenes Nogueira

Я не вижу, в чем твоя проблема; ваш пример работает отлично:

new Vue({

  el: '#app',

  data: {

    info: '',

  },

  methods: {

    update: function(event) {

      value = event.target.value;

      this.info = value;
      console.log(value)
    }

  }

});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <input @input="update">
  {{ info }}
</div>

4
RyanZim

Вы всегда можете создать двустороннюю привязку данных, используя v-model, таким образом, по существу связывая значение поля ввода со свойством info. Таким образом, значение info обновляется, когда пользователь вводит что-то в поле ввода.

Пример ниже: -

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Vue.js stuff</title>
    </head>
    
    <body>
    
        <div id="app">
            <div>You typed {{info}}</div>
            <br>
            <input type="text" v-model="info">
        </div>
    
    </body>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                info: ""
            }
        });
    </script>
    
    </html>

1
kkaosninja