Как позволить пользователю изменять вычисляемое свойство в Vue?

Question

Я собираю некоторые данные, которые я хочу разрешить пользователю загружать, и пытаюсь найти наилучший подход к работе с именем файла. Имя файла по умолчанию должно быть динамическим и основанным на текущей дате, поэтому я решил, что мне нужно создать computed property для него. Я также хочу, чтобы у пользователя была возможность изменить имя файла. Однако, когда я устанавливаю это как v-model в форме ввода, ни одно из изменений внутри формы не регистрируется в свойстве. Я не могу понять, как я могу захватить это новое значение, чтобы потом сгенерировать файл с ним. Я пробовал различные комбинации v-model и несколько computed properties, но ни одна из них не дала мне ожидаемого результата.

Здесь - это jsfiddle с минимальным кодом, необходимым для просмотра моей проблемы.

Answer 1

Обычно вы хотите, чтобы v-model ссылался на свойство data, а не на вычисляемое свойство.Такой подход будет выглядеть примерно так:

<input v-model="filename">

Затем можно инициализировать свойство данных значением по умолчанию

data: {
    filename: this.defaultFilename()
}

И определить defaultFilename() как метод

methods: {
    defaultFilename() {
        return "whatever";
    }
}