Шаблон Vue не обновляет значение (api композиции)

У меня есть функциональная составляющая:

export default defineComponent({
  name: 'MovieOverview',
  components: {
    ExpandedMovieInformation,
  },
  setup() {
    let toggleValue = false;

    const toggleExpandedMovieInformation = (moviex: Movie) => {
      toggleValue = !toggleValue;
      console.log(toggleValue)
    };

    return {
      toggleValue,
      toggleExpandedMovieInformation,
    };
  },
});

<template>
  <div>
    <button v-on:click='toggleExpandedMovieInformation'>click</button>
    {{ toggleValue }}
  </div>
</template>

Когда я нажимаю кнопку, console.log регистрирует изменение, но toggleValue в шаблоне остается тем же значением: false.


vue.js vue-composition-api
person Peter Boomsma    schedule 03.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прямо сейчас переменная toggleValue не имеет реактивности. Вы должны использовать ref() или reactive(), чтобы сделать его реактивным, чтобы представление обновлялось каждый раз, когда в это свойство вносятся изменения.

Итак, вы должны сделать что-то вроде этого:

import { ref } from 'vue'

export default defineComponent({
  name: 'MovieOverview',
  components: {
    ExpandedMovieInformation,
  },
  setup() {
    let toggleValue = ref(false);

    const toggleExpandedMovieInformation = (moviex: Movie) => {
      // now you'll have to access its value through the `value` property
      toggleValue.value = !toggleValue.value; 
      console.log(toggleValue.value)
    };

    return {
      toggleValue,
      toggleExpandedMovieInformation,
    };
  },
});

<template>
  <div>
    <button v-on:click='toggleExpandedMovieInformation'>click</button>
    <!-- You DON'T need to change toggleValue to toggleValue.value in the template -->
    {{ toggleValue }}
  </div>
</template>

Дополнительную информацию о ref и реактивный.

person sebasaenz    schedule 03.09.2020
comment
Ах, я был близок. Я пробовал это, но попытался установить измененное значение переключателя непосредственно на toggleValue, что выдает ошибку, поскольку это свойство является ссылкой, я не могу установить логическое значение непосредственно на нем. Но пришлось установить его на члене значения, которое toggleValue ref свойство. - person Peter Boomsma; 03.09.2020
comment
каждое значение, которое используется в шаблоне, которое может быть изменено, должно быть экземпляром reference () или ref ()? - person Peter Boomsma; 03.09.2020