Как очистить компонент md-поля material-ui в Vuejs2?

Question

У меня есть простой компонент списка в Vue2 с возможностью добавлять / удалять элементы.Моя проблема заключалась в том, что когда я переключился с обычного HTML-элемента на material-ui (https://vuematerial.io/),, моя функция очистки ввода прервалась.

Вот как это выглядело:

Используя обычный элемент HTML, я просто нацеливался на элемент по идентификатору (из методов моего скрипта компонента) и назначил ему пустую строку, чтобы очистить его, например:

      if (input.value !== '') {
        this.items.push({
          text: input.value
        })
        input.value = ''
      }

Я нашел решение, на которое я отвечу ниже, но снова мой вопрос был: Как очистить поле при использовании элемента material-ui?И бонусный вопрос, на который я не полностью ответил для себя: почему он сломался?

Answer 1

Итак, сначала «как» заставить его работать:

Мне нужно было установить атрибут «v-model» для моего элемента (я назвал его «inputField»), а затем инициализировать его как пустойв свойствах данных компонента, а затем в моих методах компонента addInput, я должен был установить "this.inputField = ''" вместо "input.value = ''".

Для иллюстрации:

Итак, это работает.Вот результат:

Теперь остается только вопрос, как именно все это работает, и почему метод, который работал для обычного HTML, не удался?Я не уверен, и я бы приветствовал объяснение / образование от любого, кто может объяснить!

Vue DevTools для Chrome , кажется, дает подсказку:

«Mdclearable» кажется интуитивно связанным;это свойство имеет значение false.Это как-то связано с этим?Я не уверен.

Изучение V-модели Vue и реактивности также помогло решить эту проблему.

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