有没有办法修复我的两种方式绑定和使用道具传递数据。他们没有被认出

Question

我正在尝试使用 v-model，但它没有从 'quote' 的数据对象中获取我试图绑定的内容。此外，在传递道具时尝试使用 $emit 时，由于某种原因，我的@click 无法识别我的函数 'createNew'。

我查看了 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 注册数据 'quote' 和 @click 识别我的 'createNew' 功能，但它根本不是。

Answer 1

鉴于您有一个 <form> 和一个提交 <button>，您的表单将正常提交。

您可以阻止点击按钮时的默认事件操作（使用 @click.prevent="createNew"），使用 type="button" 或（这是我的偏好），监听 submit 甚至 <form>.

使用 "quoteAdded" 等驼峰事件名称也存在潜在问题。强烈建议您始终使用 kebab-case。参见 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">

演示~https://jsfiddle.net/kc0wfydp/

有没有办法修复我的两种方式绑定和使用道具传递数据。他们没有被认出

Is there a way to fix my two way binding and passing data with props. They are not being recognized

vue.js

v-model

vue-events