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

Question

我正在尝试使用 v-model，但它没有从“报价”的数据对象中获取我试图绑定的内容。此外，在传递道具时尝试使用 $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 注册数据“报价”和 @click 以识别我的“createNew”函数，它根本不是。

标签： vue.jsv-modelvue-events

Answer 1

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

您可以阻止按钮单击（使用@click.prevent="createNew"）、使用type="button"或（这是我的偏好）上的默认事件操作，甚至在<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/