Vue Cli 3 -текст, как использовать @Prop () с двухсторонней привязкой? - PullRequest
Новая
       21

Vue Cli 3 -текст, как использовать @Prop () с двухсторонней привязкой?

0 голосов
/ 16 января 2019

Мой исходный код:

Дочерний компонент: 

<template>
  <v-snackbar
    v-model="showSnackbar"
    :bottom="y === 'bottom'"
    :left="x === 'left'"
    :multi-line="mode === 'multi-line'"
    :right="x === 'right'"
    :timeout="timeout"
    :top="y === 'top'"
    :vertical="mode === 'vertical'"
  >
    {{ text }}
    <v-btn
      color="pink"
      flat
      @click="showSnackbar = false"
    >
      Close
    </v-btn>
  </v-snackbar>
</template>

export default class AliUMSSnackbar extends Vue {
  @Prop() private showSnackbar!: Boolean;
}

Родительский компонент: 

<ali-snackbar v-bind:showSnackbar="showSnackbar"></ali-snackbar>

Но при нажатии кнопки «Закрыть» появляется эта ошибка »[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при каждом повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "showSnackbar" '

1 Ответ

0 голосов
/ 16 января 2019

Если вы используете Vue 2.3.0+, вы можете использовать .sync modifier, чтобы получить «двустороннюю привязку» для проп.

Это можно сделать, отправив события в формате update:myPropName.

Итак, в вашем дочернем компоненте обновите информацию о нажатии кнопки, выполнив это. 

<v-btn color="pink" flat @click="() => this.$emit('update:showSnackbar', false)">Close</v-btn>

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

<ali-snackbar v-bind:showSnackbar.sync="showSnackbar"></ali-snackbar>

...