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。

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

Vue.js 2 - v-model on component

vue.js

vuejs2