Vue JS и VALUE в input как подружить?

Question

[barder]

Привет всем.
Кода передадаю ID элемента - он видит название этим я убедился <? echo $editElName ?>
но в input не передается(не заполняется поле)
если я из инпута убираю v-model="name", то название встает нормально, но тогда vue скрипт не работает на поле.
Сам код:

<?     $editPage = $APPLICATION->GetCurPageParam();
        $arElementID = preg_replace("/[^0-9]/", '', $editPage);
        if (!empty($arElementID)) { ?>
            <input type="hidden" name="ELEMENT_ID" value="<?= $arElementID ?>">
            <?
            //ПОЛУЧАЕМ ДАННЫЕ ОБ ЭЛЕМЕНТЕ
            $editElement = CIBlockElement::GetList(
                Array(),
                Array("IBLOCK_ID" => $IBLOCK_ID, "ID" => $arElementID),
                false,
                false,
                Array(
                    'NAME'
                )
            );
            while ($ar_fields = $editElement->GetNext()) {
               $editElName =  $ar_fields['NAME'];
              
            }
        }
        ?>

<div class="app">
<form id="app" @submit="checkForm" name="add_my_bulletin" action="add_form_result.php" method="POST" enctype="multipart/form-data">
		<p v-if="errors.length">
			<strong>Пожалуйста исправьте указанные ошибки:</strong>
			<ul>
				<li v-for="error in errors" class="error"><strong>{{ error }}</strong></li>
			</ul>
		</p>	
		<div class="form-group">
			<label for="name" class="col-sm-9 col-form-label col-form-label-sm"><strong>Название(<font color="red">Обязательно</font>):</strong></label>
			<div class="col-12">
				<input v-model="name" id="name" type="text" name="name" maxlength="255" value="<?=$editElName ?>" class="form-control form-control-sm" placeholder="Введите название">
			</div>
		</div>

			<div class="form-group">
				<div class="col-9">
					<input class="btn btn-primary pull-right" type="submit" value="Отправить">
					<p v-if="errors.length">
						<strong>Пожалуйста исправьте указанные ошибки:</strong>
						<ul>
							<li v-for="error in errors" class="error"><strong>{{ error }}</strong></li>
						</ul>
					</p>		
				</div>
				<script>
					const app = new Vue({
						el: '#app',
						data: {
							errors: [],
							name: null
						},
						methods: {
							checkForm: function (e) {
								if (this.name) {
									return true;
								}

								this.errors = [];

								if (!this.name) {
									this.errors.push('Требуется указать название.');
								}
								e.preventDefault();
							}
						}
					})
				</script>
			</div>
               </form>
	</div>

что можно сделать?

Comments

[barder]

Pardon Me! Where Do I Find 4giveness?, ???

Answer 1

[Rsa97]

Вы не понимаете, как работает реактивность Vue.
v-model устанавливает двустороннюю связь между значением поля input и элементом данных name.
При инициализации приложения вы объявляете элемент name со значением null. Это значение и записывается как значение input'а.
Задавайте в данных нужное значение.

Comments

[barder]

решил вопрос так:

mounted() {
this.name = "<?=$editElName ?>";
}

[barder]

теперь вопрос с option
Имеется option:

<select v-model="gorod" id="gorod" name="gorod" class="form-control form-control-sm">

					<?while($ar_fields = $my_elements->GetNext()){?>

						<?if ($ar_fields['ID'] == $arGorodID) {?>
							<option value="<?=$ar_fields['ID']?>" selected><?=$ar_fields["NAME"]?></option>
						<?}else{?>
							<option value="<?=$ar_fields['ID']?>"><?=$ar_fields['NAME']?></option>
						<?}
						}?>
				</select>

мне нужно когда условие "$ar_fields['ID'] == $arGorodID" истина выбирался элемент по умолчанию.
метод mounted не помогает.
Заранее спасибо за ответ.

[Rsa97]

barder, Вы так и не поняли сути реактивной модели. Представление управляется данными. Значения полей форм связаны с данными.

[barder]

Rsa97, города у меня из инфоблока идут, я средствами битрикс перебираю и вставляю оптинсы, но когда ID совподает с переменной, мне нужно его сделать выбранным.
Заметил такую вещь, что если убираю value="<?=$ar_fields['ID']?>", то у меня название высвечивается, но value где должен находиться ID выбранного элемента отсутствует