Есть ли способ исправить мою двустороннюю привязку и передачу данных с помощью реквизита.Они не признаются - PullRequest
Новая
       22

Есть ли способ исправить мою двустороннюю привязку и передачу данных с помощью реквизита.Они не признаются

1 голос
/ 17 апреля 2019

Я пытаюсь использовать v-модель, и она не получает то, что пытаюсь связать, с объектом данных, который называется «цитата».Кроме того, мой @click по какой-то причине не распознает мою функцию 'createNew' при попытке использовать $ emit при прохождении реквизита.

Я просмотрел документацию по VueJS, а также искал в Интернете и пробовал другие вещи, такие как, возможно, использование v-bind вместе с @click, но это, похоже, не работает.Я озадачен, почему это не работает.

<template>
    <div class="row">
        <form>
            <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
                <label>Quote</label>
                <textarea class="form-control" rows="3" v-model="quote"></textarea>
            </div>
            <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
                <button class="btn btn-primary" @click ="createNew">Add Quote</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                quote: ''
            };
        },
        methods: {
            createNew(){
                this.$emit(quoteAdded, this.quote);
                this.quote = '';
            }
        }
    }

Я ожидаю, что v-model зарегистрирует «кавычку» данных, а @click распознает мою функцию «createNew», которой нет вовсе.

1 Ответ

0 голосов
/ 17 апреля 2019

Если у вас есть <form> и отправка <button>, ваша форма будет отправляться нормально.

Вы можете запретить действие по умолчанию при нажатии кнопки (используя @click.prevent="createNew"), используйте type="button" или (и это мое предпочтение), прослушайте submit даже на <form>.

. Также существуют потенциальные проблемы с использованием имен событий в верблюжьей оболочке, таких как "quoteAdded«.Настоятельно рекомендуется всегда использовать кебаб-кейс.См. https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Немного приведя в порядок ваш код, он выглядит следующим образом 

<template>
  <div class="row">
    <form @submit.prevent="createNew">
      <!-- and so on -->
        <button class="btn btn-primary" type="submit">Add Quote</button>
      <!-- snip -->
    </form>
  </div>
</template>

methods: {
  createNew () {
    this.$emit('quote-added', this.quote)
    this.quote = ''
  }
}

и в родительском шаблоне 

<your-component @quote-added="handleQuoteAdded">

Demo ~ https://jsfiddle.net/kc0wfydp/

...