Как создать поле ввода в vue js, чтобы пользователь мог вручную настроить href кнопки на то, что написано в поле после отправки

#javascript #vue.js #button #user-input #form-submit

#javascript #vue.js #кнопка #пользовательский ввод #форма-отправить

Вопрос:

Я новичок в vue js и у меня возникли некоторые проблемы, если кто-нибудь может мне помочь.

У меня есть 4 кнопки (A, B, C, D), которые, когда мы нажмем, перейдут к ссылке href, связанной внутри. Я хотел бы создать страницу конфигурации с 4 полями ввода, в этих полях отображается фактический href этих кнопок. Когда мы меняем адрес в поле ввода и отправляем форму, он автоматически заменит href этих кнопок на новый.

Пример: Кнопка A href=»google.com » После того, как мы введем A =»youtube.com » и затем отправьте href=»youtube.com »

Заранее благодарю вас.

Комментарии:

1. Боюсь, я не понимаю вопроса. Может быть, нужно больше направления или контекста? Итак, вы говорите, что хотите, чтобы пользовательский ввод указывал, что href это такое?

2. правда, ввод будет новым href для этих кнопок после того, как я его обновлю. Это похоже на страницу настроек для этих кнопок, ссылки на которые я могу легко настроить позже.

Ответ №1:

Вы могли бы попробовать привязать значение из ввода к href следующим образом

 <button :href="inputValue"/>
 

И установите входное значение с помощью ввода

 <input v-model="inputValue" />
 

Двоеточие : является сокращением для v-bind:

V-model установит значение при вводе, если вы хотите, чтобы оно было установлено только при попытке ввода

 <input v-model="inputValue.lazy" />