Vue GWT

# Form Input Bindings

# The v-model Directive

This section is about the v-model directive.

It's important to note that for now in Vue GWT only @Data fields or @Computed with a getter and a setter can be used directly in v-model. Apart from this limitations, v-model works the same way in Vue GWT than in Vue.js.

You can just see Vue.js documentation about Form Input Bindings.

# Using a Computed Property

You can use a Computed property with v-model:

@Component
public class TodoTextComputedComponent implements IsVueComponent {
    @Data Todo todo = new Todo("Hello World!");

    @Computed
    public String getTodoText() {
        return this.todo.getText();
    }

    @Computed
    public void setTodoText(String text) {
        this.todo.setText(text);
    }
}

<div>
    <input v-model="todoText"/>
    Todo Text: {{ todoText }}
</div>

# Binding to Inputs Without The v-model Directive

In some case you can't use computed properties. For example inside a v-for on the loop variable.

In those case you can use the following syntax:

<div>
    <input :value="todo.getText()" @input="updateTodoText"/>
    Todo Text: {{ todo.getText() }}
</div>

@Component
public class TodoTextComponent implements IsVueComponent {
    @Data Todo todo = new Todo("Hello World!");

    @JsMethod
    public void updateMessage(HTMLInputElement event) {
        this.todo.setText(event.target.value);
    }
}

← Composing with Components →