Проблема привязки с использованием Fast-UI + Vue.js ver. 2.6.11

Question

Предварительные условия

0. откройте песочницу, используя этот URL;
1. дождитесь, пока все установится;
2. подождите, пока не увидите ползунок в правой части экрана.

Действия по воспроизведению проблемы:

1. перетащите большой палец (ручку) ползунка вперед и назад;
2. посмотрите на значение (оно изменилось, как и ожидалось);
3. нажимайте кнопки +или -;
4. попробуйте снова использовать слайдер;
5. вернитесь к кнопке +или -и щелкните то или иное.

Фактический результат:

Связывание перестает работать или, по крайней мере, работает не так, как задумано, после взаимодействия с различными компонентами / элементами.

Ожидаемый результат:

Он должен работать после любого взаимодействия.

То, что я пробовал:

• v-модель;
• директива custom-bining для событий (onchange, drag).

пример кода директивы привязки cusotom:

Файл реализации

      Vue.directive("cd-bind", {
  bind(el, binding, vnode) {
    const inputHandler = (event) =>
      (vnode.context.$data[binding.expression] = event.target.value);
    el.addEventListener("input", inputHandler);
    el.addEventListener("change", inputHandler);
    el.addEventListener("slide", inputHandler);
  },
});

Использование:

      <fast-slider
      v-cd-bind="value"
      :value="value"
      :min="0"
      :max="20"
></fast-slider>

Дополнительная информация:

После того, как элемент теряет фокус, а другой элемент становится сфокусированным, происходит привязка (или какая-то его часть перестает работать).

Видео по этому вопросу

Предложение, сделанное "EisenbergEffect"это может помочь кому-то найти способ исправить это на сайте:

«Для Aurelia нам пришлось добавить некоторую специальную конфигурацию, чтобы обеспечить лучшую двустороннюю привязку. Я предполагаю, что аналогичная потребность существует и с Vue. Обычно в сценарии двусторонней привязки или привязки модели инфраструктура должна знать, как соотносить событие имена со свойствами, которые меняются, чтобы он мог добавлять прослушиватели событий. Я предполагаю, что Vue не знает, какие события присоединять, потому что у него есть только код для обработки встроенных элементов. В качестве следующего шага, я думаю, вы можете посмотрите, предлагает ли Vue API для предоставления этих данных их системе привязки моделей. Надеюсь, они это сделают. В этом случае нам просто нужно будет правильно настроить это для компонентов, которые мы публикуем ... и добавить это в нашу документацию для Vue. Другая проблема может быть связана с тем, устанавливает ли привязка Vue свойства или атрибуты.Они могут быть разными и, как правило, немного, когда дело доходит до элементов ввода. Устанавливает ли: value атрибут value или свойство value?"

Код основного компонента:

      <template>
  <fast-card>
    <span style="color: white"
      >Current value:
      <b style="color: red; font-size: 150%">{{ value }}</b></span
    >
    <fast-slider
      :value="value"
      :max="max"
      :min="min"
      ref="comp"
      @change="change($event)"
    >
      <div
        slot="track"
        class="time-seeker__played"
        :style="{ width: timePlayedPercentage + '%' }"
      ></div>
    </fast-slider>

    <fast-card>
      <fast-button @click="value = value > 0 ? value - 1 : value"
        >-</fast-button
      >
      <fast-button @click="value = value < 20 ? value + 1 : value"
        >+</fast-button
      >
    </fast-card>
  </fast-card>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 3,
      min: 0,
      max: 20,
    };
  },
  computed: {
    timePlayedPercentage: function () {
      let value = Math.round((this.value * 100) / this.max);
      // console.log(value, "%");
      return value;
    },
  },
  methods: {
    change(e) {
      this.value = +e.target.value;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
div {
  width: 100%;
}

.time-seeker__played {
  transition: width 75ms cubic-bezier(0.86, 0.05, 0.4, 0.96);
  background: red;
  height: 100%;
  border-radius: 15%;
}

fast-card {
  margin-block: 1rem;
}

fast-button {
  margin-inline-end: 1rem;
}
</style>

Answer 1

Направив несколько запросов в команду FAST-UI, они создали несколько PR в своем репозитории:

• rfc: отдельные понятия «значение» и «начальное значение» для элементов управления, связанных с формой FAST #5119;
• feat: добавляет свойство currentValue в связанный с формой #5298.

После того, как они обновили основной код этого проекта, эта двусторонняя привязка исчезла!

Однако, чтобы тонкости работали, они реализовали новый атрибут HTML, названный current-value (или currentValue в JS), то есть в его изменении.

Эта функция доступна в:

• @microsoft/fast-foundation@2.23.0;
• или @microsoft/fast-components@2.14.2.

Разница в компонентах HTML / Vue

До

      <fast-slider
      :value="value"
      :max="max"
      :min="min"
      ref="comp"
      @change="change($event)"
    >

После

      <fast-slider
      :current-value="value"
      :max="max"
      :min="min"
      ref="comp"
      @change="change($event)"
    >

Вот версия, которая отлично работает благодаря команде FAST-UI:открытый пример работоспособной песочницы

Кроме того, есть еще один PR, который от 28.10.2021ожидаетсяfeat: добавьте атрибут current-checked к элементам управления проверяемой формой # 5326 , который добавит current-checked атрибут, чтобы он реагировал на изменения UI / JS.