Vue.js 2 - 组件上的 v-model

Question

我有以下组件：

Vue.component('test-component',{ 

    template: `<div>
        {{value}}
        <button on:click="updateValue();">update</button>
    </div>`,

    props: ['value'],

    methods: {
        updateValue(){
            this.$emit('input', this.value + "X");
        }
    }
});

实例化如下，（绑定到数据变量'testValue）：

<test-component v-model="testValue"></test-component>

该代码旨在在单击按钮时在绑定值的末尾添加一个“X”。

我的目的是创建一个可重用的组件，该组件可以绑定到其封闭组件中的数据，例如创建自定义表单输入。

它不起作用 - 发射似乎没有做任何事情。我做错了什么？

Answer 1

您需要在下面的行中使用v-on 而不是只使用on，这会将vue 方法绑定到按钮：

template: `<div>
    {{value}}
    <button v-on:click="updateValue();">update</button>
</div>`,

工作fiddle。