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

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

0 голосов
/ 02 апреля 2019

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

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

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           
        }
    }
});

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

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

Имя

on page load

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

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

Джон

Время работы on run time

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

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

Если вы хотите отправить данные формы, вы должны предотвратить (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>

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

0 голосов
/ 02 апреля 2019

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

Вы также можете удалить свой тег 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>

Вот скрипка

Надеюсь, у вас это получится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...