Пользовательский переключатель NativeScript- vue не работает - PullRequest
Новая
       17

Пользовательский переключатель NativeScript- vue не работает

0 голосов
/ 23 апреля 2020

Я пытаюсь создать повторно используемый компонент Switch, но моя v-модель не работает. Вот ситуация:

  • Мой компонент правильно генерирует событие касания
  • Мой компонент корректно обновляет свои данные
  • Однако родительские данные не обновляются, несмотря на то, что подключен к ребенку с v-моделью

Вот некоторые фрагменты, показывающие мою настройку: 

// MY COMPONENT
<template>
  <Switch
    dock="right"
    backgroundColor="red"
    offBackgroundColor="yellow"
    v-model="model"
  />
</template>

<script>
export default {
  name: "SettingsSwitch",
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      model: this.value
    };
  },
  watch: {
    model: function(value) {
      this.$emit("tap", value);
    }
  }
};
</script>

В приведенном ниже примере у меня есть 2 переключателя: - Обычный, который работает и чьи данные обновляются - тот, который связан с моим дочерним компонентом, а данные не обновляются 

// My parent view
<template>
  <ViewWrapper viewTitle="Change your settings" pageColor="tertiary">
    <StackLayout class="content-wrapper">
      <StackLayout class="category-wrapper">
        <DockLayout class="field-wrapper" stretchLastChild="true">
          <Switch v-model="myCheck" dock="right" @tap="test" /> 
          <StackLayout>
            <Label text="Mon label" class="field-label" />
            <Label text="Ma valeur actuelle" class="field-value" />
          </StackLayout>
        </DockLayout>
        <DockLayout class="field-wrapper" stretchLastChild="true">
          <SettingsSwitch v-model="myCheck2" @tap="test2" />
          <StackLayout>
            <Label text="Mon label" class="field-label" />
            <Label text="Ma valeur actuelle" class="field-value" />
          </StackLayout>
        </DockLayout>

      </StackLayout>
    </StackLayout>
  </ViewWrapper>
</template>

<script>
import { ViewWrapper } from "@/components";
import SettingsSwitch from "./SettingsSwitch";
export default {
  name: "Settings",
  components: { ViewWrapper, SettingsSwitch },

  data() {

    return {
      myCheck: false,
      myCheck2: false
    };
  },
  methods: {
    test() {
      console.log(this.myCheck);
    },
    test2(v) {
      console.log("emit", v); // <--- Value changes each time
      console.log("model", this.myCheck2); // <--- Value never changes
    }
  }
};
</script>

Я пытался поиграть с различными настройками, такими как удаление watch и прямой вызов метод, который делает $emit, но, похоже, не решает проблему

Есть мысли?

1 Ответ

0 голосов
/ 23 апреля 2020

Так что мне удалось исправить мою проблему. Моя ошибка заключалась в том, что я излучал tap вместо input в моем компоненте. Я чувствую себя глупо, но я оставляю это, вместо этого кто-то борется, как я

Суть:

Вы можете использовать v-модель для любого тега , но чтобы обновить его значение, ему нужно получить событие «input» с некоторыми данными. Вот почему мой дочерний компонент должен выполнять this.$emit("input", value);

...