Как заменить HTML-содержимое тега значением поля ввода без установки значения ввода

ProgramBox

Как заменить HTML-содержимое тега значением поля ввода без установки значения ввода

Post author:admin
Запись опубликована:3 апреля, 2023
Post category:Вопросы по программированию

#vue.js #vuejs2

Вопрос:

У меня есть сообщение с приветом. Я хотел бы заменить текст «Там» значением, вводимым в поле ввода.

Я попытался использовать директиву

HTML

 <div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" v-init type="text" v-model="inputName" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" value="" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>

vue

 var app = new Vue({
    el: '#updateName',
    data: {
        inputName: 'There'
    },
    directives: {
        init: {
            bind(el){
                el.value = el.getAttribute('value');
                el.dispatchEvent(new Event('input'));
            }
        }
    },
});

HTML

 <div id="updateName">
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">Hey <span>{{inputName}}There</span>, happy to hear from you.</h3>
<div>
<form name="contactform" method="post" class="row form-horizontal" role="form">
<div class="form-group input--josh col-sm-6">
<div class="input-wrap">
<input autocomplete="off" type="text" v-model="inputName" v-on:keyup.enter="replaceText(inputValue)" class="form-control input__field input input__field--josh" id="inputName" name="inputName" placeholder="Name" required />
<label class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
</div>
</form>
</div>
</section>
</div>

vue

 var app = new Vue({
    el: '#updateName',
    data: {
        inputName: 'There'
    },
    methods: {
        replaceText: function(inValue) {
            this.inputName = this.inputName   inValue           
        }
    }
});

При загрузке страницы

Привет, рад тебя слышать.

Имя

Во время выполнения

Привет, Джон, рад тебя слышать.

Джон

Во время выполнения

Ответ №1:

Я не уверен, можем ли мы заполнить данные формы во время отправки формы.

Если вы хотите отправить данные формы, вам нужно предотвратить (event.preventdefault ) данные формы и сохранить их в другой переменной.

Но если вам не нужно отправлять форму, значит, вы можете достичь этого, используя приведенный ниже пример кода

 <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>  

    <div id='myApp'>
        <h3 class="myName">Hey <span v-if='inputName.length'>{{inputName}}</span> <span v-else>There</span>, happy to hear from you.</h3>
        <form method="post"> 
            <input autocomplete="off" type="text" v-model="inputName" class="form-control" id="inputName" name="inputName" placeholder="Name" />
        </form>

    </div>

</body>
</html>
<script type="text/javascript">
    var myInstance = new Vue({
        el:'#myApp',
        data:{
            inputName : ''
        }

    })
</script>

Вы должны сделать то же самое для остальной части нужного вам места.

Ответ №2:

Вы можете удалить свой метод, потому что вы используете ‘v-model’, в котором говорится, что если ваш ввод изменится, ваши данные тоже изменятся.

Вы также можете удалить свой тег span, если вам не нужно что-то менять в имени, и удалить статическое «Там» в вашем span.

 <h3 class="salutation">Hey <span>{{inputName}}</span>, happy to hear from you.</h3>

это то же самое, что

 <h3 class="salutation">Hey {{inputName}}, happy to hear from you.</h3>

Вот скрипка

Надеюсь, у вас это сработает.

1. В вашем коде должно быть какое-то условие либо v-if / v-show для показа / скрытия строки «ТАМ». Потому что, если пользователь однажды что-то вводит, это означает, что нам не нужно показывать строку «ТАМ» в данный момент в соответствии с вопросом. Надеюсь, вы поняли.

2. Привет, Такачи, во входных данных все еще есть текст «Там», который мне не нужен. Код Канны помог.