Bushrut
аа, с этим я знаком, но как это связанно с пропсами ?
Bushrut
пишу пет проект для тестов по англ. Есть компонент воркшопы в нем список оных, в каждом воркшопе свой лист тем, на каждую тему тест. После прохождения теста, на листе с темам нужно указать сколько пройдено/осталось. Ищу решение которое будет более оптимальных
Sergey
тут лучше vuex брать на мой взгляд
Bushrut
угу, его и пытаюсь понять
Vano
День добрый! Кто знает как можно использовать реактиввные данные из одного елемета(new Vue) в другом файлике?
ᛇᛏᛟᚱᛁᛕ
В каком файлике?
Vano
Есть большая форма, в ней есть кнопка по нажатию на которую вызывается модальное окно. Ето модальное окно лежит в другом html файле от формы и оно находится за границами формы, просто подключается в низу страницы и выводится абсолютом.Суть в том что по нажатию на кнопку в форме я гружу данные с API для етого окна, и я незнаю как ети данные прокинуть вдругой файл с етой модалкой.
ᛇᛏᛟᚱᛁᛕ
Moжно завести EventBus и через нее передавать событие.
ᛇᛏᛟᚱᛁᛕ
НО в том файлике тоже придется завести экземпляр vue чтобы это событие поймать.
Vano
ок как ето событие поймать?
Dmitry
я так понял, url query (page=2) - не будут работать с роутом, потому что вот я ставлю роутер-линк:
<router-link
:to="{ path: '/', query: { page: 2 }}"
class="page-link">To page 2
</router-link>
нахожусь на /?page=1, он меняет путь при переходе, но как бы сам переход не происходит, компоненты не обновляются, не маунтятся по новой
Dmitry
не использовать урл квери, делать так: /page/1 ?
ᛇᛏᛟᚱᛁᛕ
ок как ето событие поймать?
https://devblog.digimondo.io/building-a-simple-eventbus-in-vue-js-64b70fb90834
ᛇᛏᛟᚱᛁᛕ
$bus.$on()
Stanislav
Dmitry
парни, вот смотрите, я сделал пагинацию, при ?page=1 - подгружает первые 5 постов, при ?page=2 - вторые, я могу нажимать на кнопки пагинации и переходить на любую страницу, при этом я ловлю нажатие на эти кнопки и делаю следующее: обновляю посты (нужные 5 штук) и пушу в историю новую страницу (то есть была ?page=1, стала ?page=2). Но как мне отловить прыгание по истории туда сюда кнопками в браузере?
Dmitry
baur.sha
в роутинге должны же быть эти параметры
Dmitry
в роутинге должны же быть эти параметры
в роутинге то есть, но как мне отловить событие прыгания по истории, такого же нет
Dmitry
можно сделать так
/page=:page"
или
"/page:page"
, но я хочу с query-ми
Dmitry
опля
watch: {
$route: function(route, oldRoute) {
console.log(`${oldRoute.query.page} -> ${route.query.page}`)
}
}
Dmitry
это просто божественно
Anonymous
[Vue warn]: Computed property "filterProducts" was assigned to but it has no setter.???
Anonymous
<div class="row">
<input type="text" v-model="filterProducts" placeholder="Enter your search terms" />
<div class="shadow">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inlineBlock" >
<div class="box-customn" v-for="product in paginated('filterProducts')">
<div class="img-wrap-tailor">
<a href="#" class="nohover"><img :src="product.image1" alt="product" /></a>
<a href="#" class="onhover"><img :src="product.image2" alt="product" /></a>
<span> <a :href="'/product/' + product.id">Quick View </a></span>
</div>
<div class="imfo-area">
<h3> {{product.name | to-uppercase}} </h3>
<p>{{product.description | snippet}}</p>
<h4>{{product.price}}</h4>
</div>
</div>
</div>
</div>
Anonymous
computed: {
filterProducts: function () {
debugger;
console.log('++#@##@@#@#')
this.products = this.products.filter((product) =>{
return product.name.toLowerCase().match(this.search.toLowerCase());
})
},
},
}
Dmitry
<div class="row">
<input type="text" v-model="filterProducts" placeholder="Enter your search terms" />
<div class="shadow">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inlineBlock" >
<div class="box-customn" v-for="product in paginated('filterProducts')">
<div class="img-wrap-tailor">
<a href="#" class="nohover"><img :src="product.image1" alt="product" /></a>
<a href="#" class="onhover"><img :src="product.image2" alt="product" /></a>
<span> <a :href="'/product/' + product.id">Quick View </a></span>
</div>
<div class="imfo-area">
<h3> {{product.name | to-uppercase}} </h3>
<p>{{product.description | snippet}}</p>
<h4>{{product.price}}</h4>
</div>
</div>
</div>
</div>
чувак, если хочешь научиться оборачивать код в ковычки, можешь задонатить вот сюда http://yasobe.ru/na/enable_typography_telegram
Anonymous
Привет, ребят подскажите пожалуйста,
хочу сделать аниманицию для переходов для <router-view>
Выглядит это все у меня вот таким вот образом
<transition-group name="slide-fade" mode="out-in">
<router-view
v-bind:key="1"
name="help"
url-img="{{asset('img/')}}">
</router-view>
<router-view
v-bind:key="2"
name="tabs"
host="{{request()->getSchemeAndHttpHost()}}"
url-img="{{asset('img/tabs/')}}"
social-tabs="{{$userSocialTabs}}"
current-open-tab="{{session('openSocialTab')}}">
</router-view>
<router-view
v-bind:key="3"
></router-view>
</transition-group>
Anonymous
проблема заключается в том что mode=«out-in» не работает
Anonymous
сначало появляется новый компонент роута после чего исчезает старый
Igor
Для transition-group не работает
Anonymous
опа
Anonymous
тоесть получается что нужно придумывать другой вариант
Anonymous
спасибо
Anonymous
😕
Igor
Придется отказаться от leave анимации
Igor
И использовать только enter
Anonymous
leave-active и leave-to
Anonymous
про это речь я правильно понимаю?
Igor
Да
Anonymous
спасибо большое
Evgeniy
Как правильно передавать токен в гет-запросе к апи?ъ
Anonymous
😂
Anonymous
ну если вы передаете гет запросом, то и передавайте его гет запросом
Anonymous
как душе угодно
Evgeniy
Ребят, подскажите пожалуйста, как с помощью axios отправить json на серв? Спасибо
Evgeniy
ну если вы передаете гет запросом, то и передавайте его гет запросом
Что-то мне подсказывает, что передавать токен в урл - не лучшая идея
Evgeniy
поэтому и спрашиваю, как правильно, нагуглить ничего не удалось конкретного:)
Anonymous
Что-то мне подсказывает, что передавать токен в урл - не лучшая идея
В заголовке запроса как qiwi
Anonymous
Ребят, подскажите пожалуйста, как с помощью axios отправить json на серв? Спасибо
отправьте дополнительно заголовок X-Requested-With XMLHttpRequest
Evgeniy
отправьте дополнительно заголовок X-Requested-With XMLHttpRequest
Подскажите пожалуйста. В правильном направление думаю?
axios.post('http://127.0.0.1:8000/token',
{
params: {username: this.form.name, password: this.form.pass},
header: {'content-type': 'application/json'}
}).then((e) => console.log(e)).catch((err) => console.log(err))
Anonymous
Что-то мне подсказывает, что передавать токен в урл - не лучшая идея
да даже если вы его в хеадере передаете, все равно если я перехвачу запрос, я его вытащу
Anonymous
какая разница
Anonymous
делайте тогда доп проверки по юзерагенту, айпи и тдтп
Anonymous
Подскажите пожалуйста. В правильном направление думаю?
axios.post('http://127.0.0.1:8000/token',
{
params: {username: this.form.name, password: this.form.pass},
header: {'content-type': 'application/json'}
}).then((e) => console.log(e)).catch((err) => console.log(err))
в header добавьте 'X-Requested-Wuth': 'XMLHttpRequest'
Dmitry
можно как то отобразить стрыть атрибут в зависимости от условия (tabindex="-1") ?
Konstantin
html атрибут? его можно биндить
Dmitry
да, html, его нужно либо скрыть, либо показать, либо -1, либо по умолчанию
Konstantin
v-bind
https://vuejs.org/v2/guide/syntax.html#Attributes
Dmitry
неа
Dmitry
:tabindex="state[2] < 1 ? -1 : ''" так сделал, но он не скрывается
Alex
А если в computed эту тернарку?
Konstantin
всмысле v-bind непоходит
Konstantin
https://jsfiddle.net/z3ofuwap/
Konstantin
нажми на кнопку Hide и атрибута небудет на диве
senpos
Вечера!
Есть простой компонент, в котором я с помощью axios отправляю POST, в ответ приходит токен (который я успешно могу распечатать console.log'ом). И все бы хорошо, но получаю следующую проблему:
TypeError: Cannot set property 'token' of undefined
at eval (webpack-internal:///47:43)
at <anonymous>
А именно - 41 строчка в Гисте. То есть, я не могу присвоить новое значение this.token. Данные точно приходят и достаются коррктено. Так же пытался просто присвоить этой переменной строковую единичку. Всё то же. Подскажите, где согрешил :)
GIST: https://gist.github.com/Senpos/0c9ca0555a04dce35493545b27ef2cd2
Vladimir
используй стрелочные функции
Vladimir
кароче вообще юзай es6
senpos
используй стрелочные функции
Помогло! Спасибо.
Я думал это просто "сахарок", а оказалось оно на что-то влияет.
Vladimir
Если уж импортишь в стиле ес6, то будь добр везде юзай ес6)
Vladimir
стрелочные функции сохраняют контекст
Evgeniy
Ребят, а данные записывать в Vuex через mapMutations?
Evgeniy
Ребят, а в Vuex данные хранятся подобно кукам? Или они обнуляются посе каждого обновления страниы?
Vladimir
Обнуляются после полной перезагрузки страницы
Sergey
Есть либы типа localstorage vuex