Question

在创建Vue.js应用程序时，我陷入了一个奇怪的问题。我希望能够操纵一个输入字段（考虑增量和减量按钮并在焦点上擦除零值，这样用户就不必这样做），直到用户向该输入字段写入内容，一切都很好。但是，此后，数据的进一步更改将不再显示在输入字段中。

由于我确定自己不是唯一遇到此特定问题的人，因此我进行了广泛搜索，但没有运气。最让我感到困惑的是，直到字段被写入为止，一切都会正常工作，因为我无法真正想象为什么这会删除数据绑定。

以下代码应显示相同的行为。它是一个输入字段组件，使用零值初始化。聚焦时，零将被删除。这一直有效，直到用户手动写入该字段为止，即使聚焦方法被触发，零值也将不再被删除，如果满足if条件，并且数量变量中的数据已更改。

Vue.component('item', {
    data: function () {
        return {
            amount: 0
        }
    },
    render: function (createElement) {
        var self = this;

        return createElement('input', {
            attrs: {
                //bind data to field
                value: self.amount,
                type: 'number'
            },
            on: {
                //update data on input
                input: function (event) {
                    self.amount = event.target.value;
                },
                //remove a zero value on focus for user convenience
                focus: function (event) {
                    if (self.amount == 0 || self.amount == "0") {
                        self.amount = '';
                    }
                }
            }
        })
    }
})

Answer 1

我认为您需要使用domProps而不是attrs使其具有反应性。但是我建议您使用vue的template syntax，或者如果您坚持使用渲染功能，我也建议您使用JSX。

用户写入后，输入字段对数据更改无反应

1 个答案: