на да хрен сним, я в beforeDestroy поместил и норм

но да, надо будет разобраться потом, что и почему

я бы задумался... Вдруг где-то ошибку сделал.

Не поможете? Есть сервер на express.js, посылаю через fetch запросы на api, всё нормально, но когда хочу загрузить инвентарь человека и делаю на серверной часте запрос на апи другого сервиса, в консоли вылазит ошибка. Response.stauts равняется нулю, если зайду на /api/getMyInventory, ошибок нет, а потом обратно, то всё загружается

А в чем прикол, beforeCreate срабатывает раньше, чем routerBeforeEach??

Надо бы Lifecycle Diagram дополнить хуками роутера

beforeCreate - хук компонета?

на сайт русского перевода еще не влили beforeRouteUpdate :\

Привет всем,есть тут кто из Одессы?

Народ, вопрос, скорее всего, стандартный из серии передать пропсы в компоненты. Прошу пардону, три дня как разбираюсь в vue. Собственно три файла, в майне я подключаю компоненту footer.vue и передаю пропс: import Footer from './view/footer.vue' new Vue({ data: { ver : version, }, props: ['textVersion'], components:{ 'app-footer' : Footer }, router }).$mount('#app'); В index.html, я пропс передаю в компоненту: <app-footer :text-version="ver"></app-footer> В footer.vue принимаю пропс: <span id="foot__version">{{ textVersion }}}</span> Ошибка: Property or method "textVersion" is not defined on the instance but referenced during render. Помогите разобраться чо делаю не так...

Yaroslav покажи footer полностью

props: ['textVersion'] нужноуказать не в app, а в footer.vue

ты свойство props прописал?

@gmtyllo ух-ты, вот это ты внимательный

Помогите, как после v-for сгенерированного поменять значения, что бы они отобразились на странице. А то после рендера не могу поменять, ничего не происходит

как меняешь то?

Понял, в footer у меня просто template <template> <footer class="footer"> <span id="foot__version">{{ textVersion }}</span> </footer> </template>

this.items = data.items

А в app тогда ничего не указывать??

В App у тебя уже в data указано. А свойство prop - эт для свойств от родителя

Всё, политело. Гранд сенкЪю. Левым глазом читаю мануал, видать..

Ну и коль пошла такая пьянка... вопрос из семантики. Концепция vue такая что наверх компонентам летят пропсы, а вниз спускаются методы. Класический вариант. Есть хедер в нем форма с импутом для поиска. Есть острое желание прям из компоненты, гетом посылать запрос и результат парсить в ссылки роутера. Но православненько ли это с точки зрения семантики? Или перенаправлять данные с импута через this.$emit в app

как добавить условие сюда: v-if="comment.bid_id == sc.id && comment.sity == fltr.sity" если fltr.sity == '' то comment.sity == fltr.sity пропустить

Ну и коль пошла такая пьянка... вопрос из семантики. Концепция vue такая что наверх компонентам летят пропсы, а вниз спускаются методы. Класический вариант. Есть хедер в нем форма с импутом для поиска. Есть острое желание прям из компоненты, гетом посылать запрос и результат парсить в ссылки роутера. Но православненько ли это с точки зрения семантики? Или перенаправлять данные с импута через this.$emit в app

Я так и делаю, использую динамические роуты, выгребаю категории пробегаюсь по ним формирую ссылки с айди, этот айди потом учавствует в запросе в компоненте товары

пытаюсь что то типа v-if="comment.bid_id == sc.id && fltr.sity != '':comment.sity == fltr.sity"

пытаюсь что то типа v-if="comment.bid_id == sc.id && fltr.sity != '':comment.sity == fltr.sity"

Ангулар болезнь? Ну зачем нетривиальную логику писать в шаблоне? Сделай компьютед проперти. А там хоть какой говнокод пиши... P.S. вначале проверяй на !!fltr.sity P.P.S. тебе не режит sity ?

Ангулар болезнь? Ну зачем нетривиальную логику писать в шаблоне? Сделай компьютед проперти. А там хоть какой говнокод пиши... P.S. вначале проверяй на !!fltr.sity P.P.S. тебе не режит sity ?

<a v-for="comment in comments" v-if="comment.bid_id == sc.id && !!fltr.sity: comment.sity == fltr.sity"

вот так что ли

режет, мне надо сначало сделать что бы работало

зачем двоеточие?

а потом поправлю

зачем двоеточие?

посмотрел в документации подобное условие в классах

покажи ссылку

https://ru.vuejs.org/v2/guide/class-and-style.html#Использование-объектов

Я не понимаю, в чем прикол У меня в инстансе async beforeCreate, который делает запрос к серверу авторизован/нет и помещает во Vuex true/false В routeBeforeEnter у меня чекается из vuex, авторизован или нет, но какого-то хрена всегда не авторизован

Точнее, при загрузке всегда не авторизован, а если перейти на другую страницу, то срабатывает

https://ru.vuejs.org/v2/guide/class-and-style.html#Использование-объектов

так ведь.... ээээ.... ты читай документацию, поймешь о чем речь в директиве класса делается. В директиве if только expression или property

так ведь.... ээээ.... ты читай документацию, поймешь о чем речь в директиве класса делается. В директиве if только expression или property

хорошо, как бы ты написал?

если fltr.sity не равен '' то comment.sity == fltr.sity

если fltr.sity == '' то comment.sity == fltr.sity пропустить это о чем? пропустит - что означает?

Все равно не понимаю что тебе нужно от условия. опиши как в школе делали

не мучай шаблон, вынеси в methods <a v-for="comment in comments" v-if="canView(comment)"> methods: { canView(comment) { if (this.fltr.sity === '') return false return comment.bid_id == this.sc.id && comment.sity == this.fltr.sity } }

<select v-model="fltr.city" class="form-control"> <option></option> <option value='1'>1</option> <option value='2'>2</option>.... теперь надо фильтровать комментарии по городу <a v-for="comment in comments" v-if="comment.bid_id == sc.id && comment.city == fltr.city" вот только если фильтр по городу не выбран то показывать все

а получаектся что если фильтр не выбран то не покажет ничего

вроде даже в доке написано. Не городи такие условия. сделай computed проперти, возвращающий отфильтрованные города

дай ссылку

Но теперь логику понял. условие v-if="!ltr.city || ... тут все твое необычное условие"

https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

Я не понимаю, в чем прикол У меня в инстансе async beforeCreate, который делает запрос к серверу авторизован/нет и помещает во Vuex true/false В routeBeforeEnter у меня чекается из vuex, авторизован или нет, но какого-то хрена всегда не авторизован

а ответ успевает за это время прийти?

а ответ успевает за это время прийти?

Так там же async/await, он должен ждать

В том и прикол, что не успевает

Так там же async/await, он должен ждать

Кинь код

Но теперь логику понял. условие v-if="!ltr.city || ... тут все твое необычное условие"

Спасибо, теперь допёр, всё работает!!!

люди, а у кого-то извлечение sass css (с lang="sass") из *.vue работает? собираю webpack2

люди, а у кого-то извлечение sass css (с lang="sass") из *.vue работает? собираю webpack2

У меня.

Конфиг запостить?

У меня.

можно webpack.config.js?

const frontendConfig = { name: 'scnetw-frontend', target: 'web', entry: [ path.join(__dirname, 'frontend', 'styles', 'main.scss'), 'bootstrap-loader', path.join(__dirname, 'frontend', 'main.js'), ], output: { path: path.join(__dirname, 'frontend', 'public', 'build'), filename: 'bundle.js', }, resolve: { alias: { 'vue$': 'vue/dist/vue.common.js', }, }, devtool: 'source-map', module: { loaders: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, }, { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.scss$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']), }, { test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)(.*)$/, loader: 'url-loader?limit=10000', }, { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery', }, ], }, plugins: [ new ExtractTextPlugin('bundle.css'), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }), ], };

а sass у тебя внутри *.vue файла?

а sass у тебя внутри *.vue файла?

Конечно.

я просто какой то такой конфиг наблюдаю в доках

<template> </template> <script> </script> <style lang="sass" rel="stylesheet/scss"> </style>

options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this nessessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 'css': ExtractText.extract({ loader: 'css-loader', fallbackLoader: 'vue-style-loader' }) } // other vue-loader options go here } },

Вот так организован компонент.

окей, сейчас твой попробую, спасибо

ERROR: S client not available

Вот так организован компонент.

а у тебя какая версия webpack?

а у тебя какая версия webpack?

"devDependencies": { "axios": "^0.15.3", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-object-rest-spread": "^6.22.0", "babel-preset-es2015": "^6.22.0", "bootstrap-loader": "^2.0.0-beta.20", "bootstrap-sass": "^3.3.7", "css-loader": "^0.26.1", "extract-text-webpack-plugin": "2", "file-loader": "^0.10.0", "jquery": "^3.1.1", "jwt-decode": "^2.1.0", "node-sass": "^4.5.0", "nodemon": "^1.11.0", "resolve-url-loader": "^1.6.1", "sass-loader": "^4.1.1", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vee-validate": "^2.0.0-beta.21", "vue": "^2.1.10", "vue-loader": "^10.2.0", "vue-router": "^2.2.0", "vue-template-compiler": "^2.1.10", "vuex": "^2.1.1", "webpack": "^2.2.1" }, "dependencies": { "body-parser": "^1.16.0", "boom": "^4.2.0", "ejs": "^2.5.5", "express": "^4.14.1", "helmet": "^3.4.0", "jsonwebtoken": "^7.2.1", "mysql": "^2.13.0", "sequelize": "^3.30.1", "sequelize-cli": "^2.5.1" },

"devDependencies": { "axios": "^0.15.3", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-object-rest-spread": "^6.22.0", "babel-preset-es2015": "^6.22.0", "bootstrap-loader": "^2.0.0-beta.20", "bootstrap-sass": "^3.3.7", "css-loader": "^0.26.1", "extract-text-webpack-plugin": "2", "file-loader": "^0.10.0", "jquery": "^3.1.1", "jwt-decode": "^2.1.0", "node-sass": "^4.5.0", "nodemon": "^1.11.0", "resolve-url-loader": "^1.6.1", "sass-loader": "^4.1.1", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "vee-validate": "^2.0.0-beta.21", "vue": "^2.1.10", "vue-loader": "^10.2.0", "vue-router": "^2.2.0", "vue-template-compiler": "^2.1.10", "vuex": "^2.1.1", "webpack": "^2.2.1" }, "dependencies": { "body-parser": "^1.16.0", "boom": "^4.2.0", "ejs": "^2.5.5", "express": "^4.14.1", "helmet": "^3.4.0", "jsonwebtoken": "^7.2.1", "mysql": "^2.13.0", "sequelize": "^3.30.1", "sequelize-cli": "^2.5.1" },

благодарю

Привет всем)

привет

Я недавно начал заниматься с vue

Читал ваш пост про компоненты, на медиуме. Вы писали про бмен данными через props. Я попробовал и у меня что то не получается. Можете помочь?

Спрашивайте, чем сможем поможем)

Секунду

Я делаю to-do простенькиий с монгой. У меня есть 3 компонента: App, TodoList, TodoItem. Структура примерно такая -

В компоненте TodoList я из базы по запросу получаю данные и сохраняю в data

Ребят подскажите, при инициализации нового проекта через vue init webpack, и установке зависимосте, у всех такая ошибка при npm run dev Error: Cannot find module 'eslint-friendly-formatter'

?

Как мне передать данные от todolist в Item

Понятно что зависимости нет, но я еслинт неиспользую

Как мне передать данные от todolist в Item

Ты документацию читал официальную?

Да

пропс?

https://vuejs.org/v2/guide/#Composing-with-Components

Угу.

Я делаю to-do простенькиий с монгой. У меня есть 3 компонента: App, TodoList, TodoItem. Структура примерно такая -

А где TodoForm?

?

Что такое TodoForm

Ну добавлять задачки

https://ru.vuejs.org/v2/guide/components.html про компоненты и входные параметры в частности лучше почитать сначала

<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>

вот оно насколько я понимаю

да, биндим под каким-то именем в компонент значение parentMsg

Просвятите, что за гофер？

Зверек символ языка программирования Golang. Сам на нем пишу...

О, получилось!