Как изменить vue данные извне?

Question

У меня есть функция вне export default объекта. Как я могу заставить кнопку Стоп превращаться в кнопку воспроизведения через 1 секунду?

Короче говоря: Я хочу изменить playingStatus на false вне области действия.

---

Пожалуйста, проверьте {N} ссылку PlayGround на вопрос

---

<template>
    <Page>
        <ActionBar title="Home" />
        <ScrollView>
            <StackLayout>
                <Image v-show="!playingStatus" @tap="startFunc"
                    src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png"
                    stretch="aspectFit" />
                <Image v-show="playingStatus"
                    src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-512.png"
                    stretch="aspectFit" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    function playForAWhile() {
        setTimeout(stop, 1000);
    }

    function stop() {
        playingStatus =
        false; // scope error... How to change vue data from outside?
    }

    export default {
        data() {
            return {
                playingStatus: false
            };
        },
        methods: {
            startFunc() {
                this.playingStatus = true;
                playForAWhile();
            }
        }
    };
</script>

<style scoped>
</style>

Или вместо изменения переменной извне, как я могу переключать изображения без vue объекта. Заранее спасибо.

Answer 1

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

export default {
  data() {
    return {
      playingStatus: false
    };
  },
  methods: {
    playForAWhile() {  // execute this on tap
      this.playingStatus = true;

      // rest of the playing code

      setTimeout(() => {
        this.playingStatus = false;
      }, 1000);
    }
  }
};