: value = "form.name | slugify" конфликтует с v-моделью для того же элемента, поскольку последний уже расширяется до привязки значения внутри

Question

У меня есть значение, которое я хочу сохранить в базе данных как слаг, сгенерированный из имени.Проблема в том, что я не могу использовать и v-модель, и: значение в одном и том же поле ввода.какое решение для этого?Я использую Laravel и Vuejs.Как я могу решить эту ошибку?

<div class="modal-body"> 
                <div class="form-group">
                    <label>Slug</label>
                    <input v-model="form.slug" :value="form.name | slugify" type="text" name="slug" 
                        placeholder="downtown-dubai" 
                        class="form-control" :class="{ 'is-invalid': form.errors.has('slug') }">
                    <has-error :form="form" field="slug"></has-error>
                </div>
            </div>

Answer 1

Самый простой и прямой способ - использовать v-model="form.name" и избавиться от атрибута :value, а затем просто обновить form.slug, используя данные из form.name в функции, которая отправляет форму.Пример:

submitForm() {
    this.form.slug = this.$options.filters.slugify(this.form.name)
    // Submit the form...
},

Если поле form.slug действительно отображается на странице и требует немедленного реагирования, вы также можете обновить его, используя наблюдатель для form.name, например:

watch: {
    'form.name'() {
        this.form.slug = this.$options.filters.slugify(this.form.name)
    },
},

Answer 2

Просто создайте слизняк из имени на бэкэнде.Из внешнего интерфейса вы отправляете только name и другие необходимые поля, в то время как в бэкэнде вы используете name для создания слага.