Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Vue.js
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 193
1

Передача параметров в объект

18.01.2019, 14:53. Просмотров 819. Ответов 8
Метки нет (Все метки)

Доброго дня! Не судите строго, только начинаю знакомство с vue, возник такой вопрос
имеется html
HTML5
1
2
<div id="app"></div>
<script src="dist/app.js"></script>
и js
Javascript
1
2
3
4
5
6
7
import Vue from 'vue';
import App from './App.vue';
 
new Vue({
    el: '#app',
    render: h => h(App)
});
Рендерится однофайловый компонент. Можно ли из html каким-либо образом передать параметр в vue, например id=3, чтоб в дальнейшем использовать его в своем компоненте?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.01.2019, 14:53
Ответы с готовыми решениями:

Передача параметров через список параметров формы
Hi all! У кого есть опыт передачи параметров через заголовочный список параметров формы? ...

Передача нескольких параметров в pthread_create (передача структуры)
Здравствуйте. Мне нужно передать последним параметром в функцию pthread_create следующую структуру...

Объект в качестве параметров метода
Народ, кому не сложно, дайте пример простого кода с передачей объекта в параметры метода. Если...

Не создаётся объект когда один из параметров null
// создание объекта, 4-й параметр null - так ничего не происходит FRequest request = new...

Передача параметров
Почему я не могу передать параметры в событии Button1Click, правильно ли заданы конструкторы?? ...

8
vrm2
322 / 218 / 58
Регистрация: 03.12.2015
Сообщений: 439
Завершенные тесты: 2
18.01.2019, 16:13 2
Цитата Сообщение от nooclik Посмотреть сообщение
Рендерится однофайловый компонент. Можно ли из html каким-либо образом передать параметр в vue, например id=3, чтоб в дальнейшем использовать его в своем компоненте
В компоненты можно передавать значения с помощью свойств (props).

Javascript
1
2
3
4
5
6
7
8
Vue.component('blog-post', {
  // camelCase в JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
 
<!-- kebab-case в HTML -->
<blog-post post-title="hello!"></blog-post>
Если нужно передавать свойство в самый главный компонент, то:

Javascript
1
2
3
4
new Vue({
    el: '#app',
    render: h => h(App, {props: {myId:3}})
})
0
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 193
18.01.2019, 16:24  [ТС] 3
И в html указать :id=3 для дива?
0
vrm2
322 / 218 / 58
Регистрация: 03.12.2015
Сообщений: 439
Завершенные тесты: 2
18.01.2019, 18:32 4
Цитата Сообщение от nooclik Посмотреть сообщение
И в html указать :id=3 для дива?
В каком html?

Приведенный Вами html это html-код страницы, на которой будет запущен Vue. Приведенный Вами JS-код это код, который запускает библиотеку Vue. Это не код компонента, это код обычной html-страницы.

При запуске Vue-библиотека выводит "главный" (корневой) компонент, в Вашем случае этот компонент называет App. Компоненты создаются либо с помощью файлов .vue либо с помощью вызова Vue.component в JS.

В html страницы можно указать :id=3 для дива. Тогда у дива появится странный атрибут ":id" со значением 3, и браузер его просто проигнорирует. В html компонента можно писать :id=3 и это значение будет передано компоненту.

Здесь компоненту blog-post передается параметр post-title со значением "hello":
Код
<blog-post post-title="hello!"></blog-post>
Двоеточие для vue имеет собой смысл, он не для передачи параметров, а для связи параметров и некоторого выражения или переменно. Здесь компоненту blog-post передается параметр post-title, который будет иметь значение, сохраненное в myVar
Код
<blog-post :post-title="myVar"></blog-post>
0
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 193
19.01.2019, 10:57  [ТС] 5
Хорошо. С компонентами понял. А в экземпляр vue передать параметры из html можно как? Расскажу о цели, может прояснит. Есть форма, на vue. Форма через axios работает с неким api, при обращении к которому указывается id клиента. Данный html, указанный в теме, размещается на сайтах клиента. Суть вопроса заключается чтоб при вставке кода указывать тот самый id чтоб форма использовала его при запросах к апи
0
vrm2
322 / 218 / 58
Регистрация: 03.12.2015
Сообщений: 439
Завершенные тесты: 2
19.01.2019, 12:04 6
Цитата Сообщение от nooclik Посмотреть сообщение
А в экземпляр vue передать параметры из html можно как?
Выше написано как. См. сообщение № 2 "если нужно передавать свойство в самый главный компонент, то:"
0
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 193
20.01.2019, 14:25  [ТС] 7
Цитата Сообщение от vrm2 Посмотреть сообщение
new Vue({
* * el: '#app',
* * render: h => h(App, {props: {myId:3}})
})
Да я понял что таким образом я могу передать myId в главный компонент. Но не совсем то что я хочу. я на сайте подключаю свой скрипт и размещаю тег
HTML5
1
<div id="app"></div>
где и выводится моя форма. И через этот тег мне нужно передать myId скрипту, что-то вроде
HTML5
1
<div myId="3" id="app"></div>
.
По вашему методу мне нужно пересобирать скрипт для каждого myId, что мне не нужно, скрипт будет подтягиваться удаленно, и в зависимости от какого-то значение в указанного в диве, будет происходить работа с api
0
vrm2
322 / 218 / 58
Регистрация: 03.12.2015
Сообщений: 439
Завершенные тесты: 2
20.01.2019, 17:49 8
Лучший ответ Сообщение было отмечено nooclik как решение

Решение

Цитата Сообщение от nooclik Посмотреть сообщение
По вашему методу мне нужно пересобирать скрипт для каждого myId, что мне не нужно, скрипт будет подтягиваться удаленно, и в зависимости от какого-то значение в указанного в диве, будет происходить работа с api
С помощью js вытащите значение атрибута из дива (через getAttribute, например). Затем передайте это значение в Vue.
1
nooclik
26 / 26 / 17
Регистрация: 05.07.2014
Сообщений: 193
20.01.2019, 18:40  [ТС] 9
Я через data-атрибут уже сделал. Спасибо за ответы
0
20.01.2019, 18:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.01.2019, 18:40

Передача параметров
Доброго времени суток всем! Возникла такая проблема, очень прошу помощи. Реализую паттерн MVP....

Передача параметров из C# в С++
Привет. вот в чем возникла проблемка: есть программа на C# которая просматривает папку и записывает...

Передача параметров
Всем привет. Есть один php-файл: &lt;script&gt; function setvar() { var x=5; var y=12; }...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru