Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Vue.js input и v-model поместить НЕ рядом  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
подскажите пожалуйста как сделать если метку и инпут нужно разбросать по странице?
сейчас у меня так:
<div class="sample"><input type="text" v-model="lbl2">
        <hr><!--линия_______________-->
        <h2>Hello, {{ lbl2 }}</h2>
        </div>
5 ноя 21, 19:31    [22392271]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
вроде как сказано, что нужно в любом месте:
<span v-html>="lbl2"</span>

что-то не хочет......
6 ноя 21, 13:29    [22392493]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа
как сделать если метку и инпут нужно разбросать по странице?

катастрофа
вроде как сказано, что нужно в любом месте:
<span v-html>="lbl2"</span>

что-то не хочет......

У тебя очень странная интерпретация "разброса по странице"...
Я вот просто взял букварь... Посмотрел чего пишут про v-html... И вуаля!
автор
все привязки данных игнорируются. Запомните, вы не можете использовать v-html для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.

https://ru.vuejs.org/v2/guide/syntax.html
6 ноя 21, 22:50    [22392677]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
krvsa,
я это уже читал, но так и не понял как в коде:
<div class="sample"><input type="text" v-model="lbl2"></div>
<h2>Hello, {{ lbl2 }}</h2>

после Hello, увидеть то, что введу в инпут поле?
7 ноя 21, 10:56    [22392726]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа, если верить букварю - то так и увидишь...
<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>

https://ru.vuejs.org/v2/guide/forms.html
7 ноя 21, 15:51    [22392788]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа, я вот почитал букварь... И сделал простенькое приложение...
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style type='text/css'>
</style>
</head>
<body> 
<div id="app">
	<input v-model="message" placeholder="отредактируй меня">
	<p>Введённое сообщение: {{ message }}</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		message: ''
	}
})
</script>
</body>
</html>

Там все нормально выводится...
7 ноя 21, 16:00    [22392792]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
krvsa,
так у меня то трудность, чтобы
<div id="app">
	<input v-model="message" placeholder="отредактируй меня">
	<p>Введённое сообщение: {{ message }}</p>
</div>

строка
<p>Введённое сообщение: {{ message }}</p>
была НЕ в div id="app"
7 ноя 21, 17:23    [22392818]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа, и ты не понимаешь всю тщетность этого желания?

Вся реактивность вьюхи как раз и строится именно внутри своего app.
Я тебе больше могу сказать.
Весь контент страницы можно поместить в "корневой" див с id='app'. ;)
7 ноя 21, 18:10    [22392833]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
катастрофа
Member

Откуда:
Сообщений: 3269
krvsa, понял, с id понятно
<div id="app"><input v-model="message" placeholder="отредактируй меня"></div>
<div id="app"><p>Введённое сообщение: {{ message }}</p></div>

не прокатит
но и с div class увы тоже самое
а про
krvsa
катастрофа, и ты не понимаешь всю тщетность этого желания?

Вся реактивность вьюхи как раз и строится именно внутри своего app.
Я тебе больше могу сказать.
Весь контент страницы можно поместить в "корневой" див с id='app'. ;)

понятно, спасибо
7 ноя 21, 18:52    [22392842]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13769
катастрофа
но и с div class увы тоже самое

Видать ты в корне не понимаешь как это все работает...
Тут не работает твое "хочу вот так"... Здесь все работает как задумано разработчиками.
Есть контейнер - в нем все и срабатывает.
7 ноя 21, 20:40    [22392869]     Ответить | Цитировать Сообщить модератору
 Re: Vue.js input и v-model поместить НЕ рядом  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
krvsa
Тут не работает твое "хочу вот так"... Здесь все работает как задумано разработчиками.
Есть контейнер - в нем все и срабатывает.
учите ванильный js, html, css3 - и будет вам счастье
7 ноя 21, 21:10    [22392882]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить