Vue.js 2 - 组件上的v模型

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");
        }
    }
});

实例化如下，（绑定到数据变量＆＃39; testValue）：

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

该代码旨在添加＆＃39; X＆＃39;单击按钮时，在绑定值的末尾。

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

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

Answer 1

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

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

工作fiddle。