Вопросы с тегами [vue.js]

0

голосов
0

ответ
5

Просмотры

VueJS / VueX: Часы никогда не вызывается, когда государственная собственность является массивом

У меня есть простой поток, которые состоят в: Вызов действия VueX хранить несколько автомобилей на стороне серверной Позвони мутацию для хранения новых автомобилей только что создали Объявите часы, которые должны вызываться каждый раз, когда массив автомобилей я изменилась Проблема в том, что мой наблюдатель является никогда не называли в моем компоненте. Модуль VueX: / * * Состояние: свойства для хранения * / Const State = {siteCars: []}; / * * Геттеры: Геттеры свойств, определенных в состоянии * / Const геттеры = {siteCars (состояние) {вернуть state.siteCars; }}; / * * Мутации (Сеттеры): Сеттеры свойств, определенных в состоянии * / Const мутации = {PUSH_CARS (состояние, данные) {state.siteCars = _.merge (state.siteCars, data.cars); }}; / * * * Действия / константные действия = {/ * * Действие используется для создания нескольких автомобилей * / massImportCars ({совершает, rootState}, Полезная нагрузка) {axiosBackend.post ( "/ автомобили / massimport", полезная нагрузка, {заголовки: {авторизации: rootState.auth.authString}}) .then (Рез => {совершающие ( "PUSH_CARS", {автомобили: res.data. данные});.}) поймать (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, authString}}) .then (Рез => {фиксации ( "PUSH_CARS", {автомобилей: res.data.data});.}) улов (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, authString}}) .then (Рез => {фиксации ( "PUSH_CARS", {автомобилей: res.data.data});.}) улов (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, }; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, }; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])},
wawanopoulos
-1

голосов
0

ответ
43

Просмотры

Перебор объектов, содержащих массивы

Я новичок на vue.js и у меня есть проблемы с извлечением некоторых данных из ответа, который я получил от Аксиос. Я попытался итерацию через него с помощью Foreach, но он говорит, что Foreach не функция так же, как если бы данные не должны повторяться до конца. {...} Mbulimet х Kerkuara: Массив (1) Примите всего на человек: Array (3) Shenime: Массив (1) Шум электронной Sigurimit: Массив (1) Тот dhenat е Klientit: Array (4) __ob__: наблюдатель {значение: { ...}, отд: Dep, vmCount: 0} получить Mbulimet х Kerkuara: ƒ reactiveGetter () установить Mbulimet х Kerkuara: ƒ reactiveSetter (newVal) получает прими всего на одного человека: ƒ reactiveGetter () устанавливается прими общий на человек: ƒ reactiveSetter (newVal ) получить Shenime: ƒ reactiveGetter () набор Shenime: ƒ reactiveSetter (newVal) получить Shuma е Sigurimit: ƒ reactiveGetter () установить Shuma е Sigurimit: ƒ reactiveSetter (newVal) получить Te dhenat е Klientit: ƒ reactiveGetter () множество Того dhenat е Klientit: ƒ reactiveSetter (newVal) __proto__: Object это ответ я получаю, и мне нужно перебирать и увидеть значение массивов на вершине, как Mbulimet х Kerkuara, Primi Всего на человек. итерация по данным должно произойти в JavaScript, а не в представлении.
endrit sheholli
1

голосов
2

ответ
562

Просмотры

Issue with foundation used in .vue single file components

I have realised that there is a problem when using Zurb Foundation classes in .vue single file components. At first I could not get a Reveal Modal to work inside the .vue component but it was working when I use the same code in a blade or html file. Then I noticed a pattern because when I tried to use the Foundation's Orbit inside the component it failed, at first I thought it was an error but then I used the same code in a blade file and it worked. Other foundation classes such as row, grid and buttons are working just fine. Has anyone experienced the same issue? And how can I work around it? Here is the code for the modal: WATCH VIDEO × And for the orbit I used the basic example in the foundation docs for testing. Previous Slide◀︎ Next Slide▶︎ Space, the final frontier. Lets Rocket! Encapsulating Outta This World First slide details.Current Slide Second slide details. Third slide details. Fourth slide details.
Phillis Peters
1

голосов
2

ответ
382

Просмотры

Prevent url from appearing or modifying current address bar value

I have this vue js script const NotfoundComponent = { template: 'Not found' }; const HomeComponent = { template: 'Home' }; const AboutComponent = { template: 'About' }; const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent }, { path: '*', component: NotfoundComponent } ]; const router = new VueRouter({ mode: 'history', routes }); new Vue({ el: '#app', router }); that uses vue-router. I am running vue js inside a jsp page inside a spring mvc app. I would like to have load the jsp page normally as served by jetty and only use vue js router to navigate between components inside the page. I have the router setup and working inside the page, however on link click, i do not want any of this vue js links home about no route to modify the current address bar or append anything new to it. Can that be done using vue js?.
Gandalf
1

голосов
1

ответ
89

Просмотры

Где бесконечность цикла?

Я считаю себя с ошибкой бесконечного цикла, но я не вижу, где это. Вот когда я добавить класс. Шаблон: Jour-де-ла-Semaine {{DAYOFWEEK (день, индекс)}} скрипт: данные: () {isWeekend ложь}, методы: {день недели (день) {вар d = момент (новая дата (this.currentYear + -»+ this.nbMonth + '-' + день)) день ();. если (д === 5 || д === 6) {this.isWeekend = истина} еще {this.isWeekend = FALSE} возврата this.days [d]}}
DenisMasot
1

голосов
3

ответ
82

Просмотры

Как получить доступ к свойству экземпляра приложения щёток, в шаблоне .vue компонента?

Я создал новое приложение Vue с вю-кли. У меня есть VUE-погрузчик и и VUE-маршрут также работает в этом проекте. Как получить доступ к свойству события в следующем случае? В настоящее время ниже код приводит к следующей ошибке: Свойство или метод «событие» не определен на экземпляре, но ссылаются при визуализации main.js импорта Vue из «вю» импорт App от импорта маршрутизатора «./App.vue» от ' ./router»Vue.config.productionTip = ложный новый Вью ({маршрутизатор, магазин, визуализации: функция (у) {вернуться у (App)} // данные данных: {события: [{имя: 'это', цена : 2000}, {имя: 'что', цена: 3000}, {имя: '-другого', цена: 4000}]}}) $ крепление ( '# приложение') ./App.vue Главная |. О {{event.name}} {{}} event.price
DevLime
1

голосов
1

ответ
604

Просмотры

Как я могу использовать Vue.js переходы без жесткого кодирования высоты?

У меня есть приложение Vue с элементом, который необходимо развернуть и свернуть с нажатием кнопки. Эффект должен быть анимированы, чтобы сделать его менее резким. Я использую тег для этого, но он не работает, если я не трудно закодировать свойство высоты элемента в CSS. Это не будет работать, потому что элемент содержит динамические данные и будет иметь различную высоту. Вот мой код: {{пункт}} экспорта по умолчанию {данных () {возвращение {showIt ложь}; }} Вот соответствующий CSS: .test-блок {/ * добавление высоты делает переход работу, но точная высота не может быть известна заранее высоты времени: 100px; * /} .Test-тран-вход-активный {переход: все .5s легкость; } .Test-тран-оставить-активные {переход: все .5s облегчить; } .Test-тран-вход, .test-тран-оставить к высоте: 0; } .Test-тран-оставить, .test-тран-вход к / * добавлению высоты делает переход работы, но точная высота не может быть известна заранее высоты времени: 100px; * /} Без свойства высоты, элемент показывает и скрывает правильно, но там нет анимации. Он просто появляется и исчезает мгновенно. Как я могу сделать анимацию работу без жесткого кодирования высоты в CSS?
d512
1

голосов
0

ответ
455

Просмотры

How to watch all data in a vue.js application?

Я использую LocalStorage упорствовать мой vue.js данные приложений между загрузками страниц. Я следую за этот учебник, и до сих пор все работает хорошо. Мое приложение выглядит следующим образом: вар приложение = новый Vue ({эш: '#content', данные: {Устойчивые: {план: 'Мега', количество мест: '0', support_plan: 'None'},}, часы: { настойчивый: {обработчик () {localStorage.setItem ( 'service_plan_wizard', JSON.stringify (this.persistant)); console.log ( 'сохранение элементов');}, глубоко: истинно} Как вы можете видеть, когда изменения что угодно в «упорного» части данных, оно сохраняется в LocalStorage. круто. Однако, гнездящихся все данные в пределах «упорного» блока вызывает проблемы в других местах. Например, при использовании вычисления на вложенное значении не работает. Можно ли просматривать все данные в представлении? Я ищу что-то вроде: вар приложение = новый Вью ({эш: '#content', данные: {план: 'Мега', количество мест: '0', support_plan: 'None'}, часы: {данные: { обработчик () {localStorage.setItem ( 'service_plan_wizard', JSON.stringify (this.data)); console.log ( 'сохранение элементов');}, глубоко: истинно}, спасибо! {Обработчик () {localStorage.setItem ( 'service_plan_wizard', JSON.stringify (this.data)); console.log ( 'пункты экономии'); }, Глубоко: истинно}, спасибо! {Обработчик () {localStorage.setItem ( 'service_plan_wizard', JSON.stringify (this.data)); console.log ( 'пункты экономии'); }, Глубоко: истинно}, спасибо!
clone45
1

голосов
0

ответ
884

Просмотры

Как интегрировать ТСМ уведомления в VUE

Я строю веб-приложение в Vue с использованием Webpack. В настоящее время я хочу, чтобы интегрировать ТСМ (Firebase Cloud Messaging) уведомления в веб-приложение для отправленного уведомления пользователей. Я прошел через эту ссылку https://firebase.google.com/docs/web/setup?authuser=0, но я не в состоянии интегрировать его в Vue
UnmeshD
1

голосов
0

ответ
323

Просмотры

Элемент интерфейса теги проверка не работает в форме

Я использую элемент пользовательского интерфейса для vuejs. Теги элемент пользовательского интерфейса работает отлично, но когда доходит до проверки тега с элементом формы с проп имущества. Все, кажется, не работает хорошо. Если тег был пуст, я нажимаю кнопку отправки, он будет отображаться должен быть обязательный тег. Когда тег был включен необходимый текст по-прежнему появляется. {{CriteriaType}} + Вид
Henry Chozo
1

голосов
0

ответ
145

Просмотры

Прекратить Webpack от компиляции несколько раз на одном изменении файла

Я использую Vue.js Single File Компоненты с машинопись. Для CSS есть WebPack загрузчик, который генерирует CSS стилей файл из .vue файлов. правила: [{тест: /\.vue$/, использование: [{погрузчик: 'Вью-погрузчик'}]}, {тест: /\.vue$/, использование: [{погрузчик: «WebPack-Распылитель-погрузчик }]}, {тест: /\.css?$/, использование: [ 'стиль-погрузчик', 'CSS-погрузчик']}] WebPack-форсунка-погрузчик генерирует main.css, который я импортировать в моем Main. вю файл как: импорт»./main.css. Теперь, когда мое изменение ничего Main.vue, он запускает WebPack-распылитель-загрузчик, который генерирует новый main.css. Но поскольку main.css является зависимостью Main.vue, WebPack считает Main.vue изменился и снова запускает WebPack-распылитель-погрузчик вызывает петлю. oneOf кажется, что он может быть использован для моего дела, но я не очень понимаю, как это сделать. Любые указатели?
Kushagra Gour
1

голосов
0

ответ
415

Просмотры

Webpack - Bundle только необходимые файлы CSS для производства

У меня есть приложение Vue, который имеет 3 различные темы CSS в зависимости от того, что «бренд» установлен в положение. Сейчас она работает в разработке. Я бег команды НПХ запустить Дев и передать в бренд, а затем установить переменный бренд, чтобы быть доступными по всему миру, а затем в моем main.js файла я установить необходимый CSS динамически в зависимости от того, что переменной бренды. вар бренд = окно .__ BRAND__; требуется ( '../ статического /' + бренд + /css/typography.css ') требует ( '../ статического /' + бренд + /css/header.css') требует (»../ статических / '+ бренд + /css/main.css') требуют (' ../ статический / '+ бренд + '/css/footer.css') Файловая структура: статические Foo CSS бар CSS Так что, если я бегу' НПМ - бренд = бар запустить DEV «это потребует» ..static / бар / typography.css' и т.д. Это прекрасно работает в моей местной окружающей среды; каждый из них имеет его» s собственный особый облик. Проблема у меня сейчас с созданием приложения для производства. Webpack каким-то образом компиляции ВСЕ CSS файлов в один, и я в конечном итоге с гибридным приложение, которое имеет некоторый стиль от каждого. Вместо этого, мне это нужно, чтобы скомпилировать CSS с только файлы, которые необходимы. Вот мой файл webpack.prod.conf: вар путь = требуется ( 'путь') вар Utils = требуется ( './ Utils ') вар WebPack = требуется (' WebPack ') вар конфиг = требуется (' ../ конфигурации' ) вар слияния = требуется ( 'WebPack-слияние') вар baseWebpackConfig = требуется (»./ webpack.base.conf ') вар CopyWebpackPlugin = требуется (' копирования WebPack-плагин ') вар HtmlWebpackPlugin = требуется (' HTML-webpack- плагин ') вар ExtractTextPlugin = требуется (' экстракт текста WebPack-плагин ') вар OptimizeCSSPlugin = требуется (' // извлечение CSS в свой собственный файл нового ExtractTextPlugin ({имя файла: utils.assetsPath ( 'CSS / [имя] [contenthash] .css')}) // Сжать извлеченный CSS. Мы используем этот плагин, так что возможно // дублируется CSS из различных компонентов может быть deduped. новый OptimizeCSSPlugin ({cssProcessorOptions: {безопасно: истинно}}) // генерировать DIST index.html с правильным хэшем активов для кэширования. // Вы можете настроить вывод путем редактирования /index.html // см https://github.com/ampedandwired/html-webpack-plugin новый HtmlWebpackPlugin ({имя файла: config.build.index, шаблон: 'index.html', впрыснуть: правда, Minify: {removeComments: истина, collapseWhitespace: истина, removeAttributeQuotes: истинные // Дополнительные параметры: // https: // GitHub. . | ') + ') $'), Порог: 10240, minRatio: 0,8}))} если (config.build.bundleAnalyzerReport) {вар BundleAnalyzerPlugin = требуется (' WebPack-расслоением-анализатор ») BundleAnalyzerPlugin webpackConfig.plugins.push (новый BundleAnalyzerPlugin ())} module.exports = webpackConfig и мой конфиг / index.js файл: // см http://vuejs-templates.github.io/webpack документации. вар путь = требуется ( 'путь') = {module.exports построить: {ENV: требуется ( './ prod.env '), индекс: path.resolve (__ имя_директории,' ../dist/index.html'), assetsRoot: path.resolve (__ имя_директории, '../dist'), assetsSubDirectory: 'статический', assetsPublicPath: '/', productionSourceMap: правда, // Gzip отключены по умолчанию, как много популярных статических хостов, такие как // Surge или Netlify уже GZIP всех статических активов для вас. // Перед установкой в ​​`true`, убедитесь, что: // НПМ установки --save-DEV компрессионного WebPack-плагин productionGzip: ложные, productionGzipExtensions: [ 'JS', 'CSS'], // Запуск команды сборки с дополнительный аргумент // Просмотр отчета анализатора расслоением после создания отделки: // `НПМ запуска сборки --report` // Установка для` true` или `false` всегда включить или выключить bundleAnalyzerReport: process.env.npm_config_report }, Dev: {ENV: требуется ( './ dev.env'), порт: 8081, autoOpenBrowser: правда, assetsSubDirectory: 'статические', assetsPublicPath: '/', proxyTable: {// прокси все запросы, начинающиеся с / API для jsonplaceholder '/ API': {цели: 'HTTP: // локальный: 3001', changeOrigin: истинно}}, // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются "глючит" // с помощью этой опции, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // по нашему опыту, они обычно работают, как и ожидалось, // просто быть в курсе эта проблема при включении этой опции. cssSourceMap ложь}} // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются «глючит» // с этой опцией, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // В нашем опыт, они обычно работают, как и ожидалось, // просто быть в курсе этой проблемы при включении этой опции. cssSourceMap ложь}} // CSS Sourcemaps по умолчанию отключена, поскольку относительные пути являются «глючит» // с этой опцией, в соответствии с CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // В нашем опыт, они обычно работают, как и ожидалось, // просто быть в курсе этой проблемы при включении этой опции. cssSourceMap ложь}}
Linx
1

голосов
1

ответ
1.1k

Просмотры

How to test a computed prop setter of Vue component by Jest

I want to test if component's setter throws a custom error when trying to assign an invalid value. I think problem is that it doesn't even call a setter it is behaving like it just creates/assigns to normal property in the object. But it returns default sortData. Thanks for the help! Edit: here is described Vue component prop with getters and setters, which is exactly what I'm doing Code in the component: // Vue Component... sort: { /** * Getter. * */ get() { // Storing data from data(). return this.sortData }, /** * Setter. * */ set(value) { if (value === 'none' || value === 'by-date' || value === 'by-ratings') { this.sortData = value this.$emit('sortChange', value) } else { // I want to test this error throwing. throw new EnumError('(Component::SortPanel): Sort property is of type Enum. ' + 'It excepts either none, by-date or by-ratings values.') } } }, // Vue Component... Test case: beforeEach(function() { // Component for testing is inited by shallow function from vue-test-utils package. sortPanel = shallow(SortPanel) }) // Other tests... it('should have property sort', function() { expect(sortPanel.vm.sort).toBe('none') // Should be either none, by-date or by-ratings. expect(() => { sortPanel.vm.sort = 'anything' }).toThrow(EnumError) }) // Other tests...
Mikeee
1

голосов
1

ответ
51

Просмотры

vuejs - ленивая загрузка с помощью WebPack глыбы - импорт против requie-решимости

В случае отложенной загрузки с использованием WebPack ломти, я нашел несколько способов - один с помощью требует и решить и другой используют импорт. требуют и разрешения Const Главная ПУТЬ = решительность => {require.ensure ([ 'компоненты / Home / Home'], () => {решительность (требуется ( 'компоненты / Home / Home'));}, 'дом' ); }; импорт Const Главного ПУТИ = импорт (/ * webpackChunkName: "дом" * / 'компоненты / Home / Home'); Может кто-то пожалуйста, объясните мне, что разница между этими 2 подходами? И когда использовать каждый из них?
skubal
1

голосов
0

ответ
70

Просмотры

AWS Не удалось выполнить «setRequestHeader» на «XMLHttpRequest» с Evaporate.js

Я использую испаряться (https://github.com/TTLabs/EvaporateJS), чтобы загрузить свои файлы на S3. Приложение в настройках Ви / Nuxt.js, и это мой конфиг: Const uploadApiConfig = {signerUrl: '/ апи / sign_auth', awsRegion: process.env.awsRegion, aws_key: process.env.awsKey, ведро: процесс. env.awsBucket, computeContentMd5: правда, awsSignatureVersion: '4', cryptoMd5Method: (данные) => {возвращать AWS.util.crypto.md5 (данные, 'base64')}, cryptoHexEncodedHash256: (данные) => {вернуть AWS. util.crypto.sha256 (данные, 'шестигранной')}, signHeaders: { 'авторизации': `Bearer $ {маркер}`}}, но до сих пор получить не удалось эту ошибку выполнить 'setRequestHeader' на 'XMLHttpRequest': «AWS4-HMAC -SHA256 Credential = ... / s3 / aws4_request, SignedHeaders = хост;
Lukas
1

голосов
1

ответ
155

Просмотры

Vuefire динамический путь

Как установить путь для vuefire, как показано ниже экспорта по умолчанию {firebase: {ClassList: db.ref ( «глава / 1»), // здесь 1 должны быть взяты из данных // как этот db.ref ( «глава /» + this.chapterid)}, данные: {chapterid: ''}, устанавливается: {// getchapterid здесь this.chapterid = getChapterId ()}} это не работает, возвращает ошибку неопределенную chapterid, есть в любом случае сделать это?
rashidnk
1

голосов
1

ответ
93

Просмотры

Vue.js 2 & WebPack / NPM старт открывает и перезагружает в FF вместо Chrome

Я следую Vue.js учебник «The Ultimate Vue JS 2 Разработчики курса» (Project 2), и я бегу в проблему с браузером обновления на изменение файла. Я на Kubuntu 16.04 и стандартный браузер моей системы является Chrome, но тем не менее, каждый раз, когда я изменить файл в моем проекте, WebPack пытается открыть Firefox, который не установлен на моей системе (и я не хочу, чтобы использовать Firefox, но Chrome). Я уже прошел через webpack.config.js, но я просто не могу понять, где я мог бы изменить настройки браузера. webpack.config.js требуют ( '') dotenv конфигурации (). Const = путь требует ( 'путь'); Const WebPack = требуется ( 'WebPack'); module.exports = {запись: [ '] ./src/main.js, выход: {путь: path.resolve (__ имя_директории,' ./dist '), publicPath: '/ расстояние /', имя файла:' // других препроцессоры должны работать из коробки, не загрузчик конфигурации, как этот nessessary. 'СКС': 'вя-стиль-погрузчик CSS-погрузчик дерзость-погрузчик!', 'Дерзость': 'вя-стиль-погрузчик CSS-погрузчик дерзость-погрузчик indentedSyntax!?', 'JS': «столпотворение-погрузчик ? пресеты [] = окр»}}}]}, решительность: {псевдоним: { 'вю $': 'вю / расстояние / vue.common.js'}}, devServer: {historyApiFallback: правда, noInfo: истинно}, производительность: {подсказки: ложные}, devtool: '# Eval-источник-карта'}; если (process.env.NODE_ENV === 'Развитие') {module.exports.plugins = [новый webpack.optimize.OccurrenceOrderPlugin (), новый webpack.HotModuleReplacementPlugin (), новый webpack.NoEmitOnErrorsPlugin ()]; module.exports. entry.push ( '? WebPack-горячей промежуточного / клиент путь = / __ webpack_hmr & таймаут = 20000'); ? // noInfo = истинный и тихий = TRUE) module.exports.module.rules [0] .use.push ({погрузчик: 'WebPack-модуль горячие принимать'}); } Если (process.env.NODE_ENV === 'производство') {module.exports.devtool = '# источник-карта'; CONCAT ([новый webpack.DefinePlugin ({ «процесс // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []). .env ': {NODE_ENV: "производство"}}), новый webpack.optimize.UglifyJsPlugin ({sourceMap: истинно, сжимают: {предупреждения: ложные}}), новый webpack.LoaderOptionsPlugin ({минимизировать: истинный})] )} WebPack-DEV-middleware.js Const = webpackDevMiddleware требуется (» ./api '); если (process.env.NODE_ENV === 'развитие') {требуют ( './ WebPack-DEV-промежуточного слоя') Init (приложение). } Если (process.env.NODE_ENV === 'производство') {app.use ( '/ расстояние', express.static (path.join (__ имя_директории, 'расстояние'))); } App.use ( '/ общественная', express.static (path.join (__ имя_директория, 'общественность'))); Пусть шаблон = fs.readFileSync (path.resolve ( './ index.html'), 'UTF-8'); (Функция '/' (REQ, разреш) {res.send (шаблон);}) app.get; app.get ( '/ апи', функция (REQ, разреш) {api.getData (функция (ERR, данные) {если (ERR) {res.status (500) Пошлите (ERR);} еще {res.json (данные); } }); }); пусть OfflineData = JSON.parse (fs.readFileSync (path.resolve ( './ api_offline.json'), 'UTF-8')); app.get ( '/ offline_api', функция (Req, разреш) {пусть данные = offlineData.find (пункт => item.imdbID === req.query.i); если {данных = { "Ответ": "Ложь", "Ошибка": `IMDb ID $ {req.query.i} не found.`}} res.json (данные); (данные!) }); app.listen (process.env.PORT, функция () {console.log ( `Пример приложения прослушивает порт $ {process.env.PORT}`!), если (process.env.NODE_ENV === 'развитие') {требуют ( 'открытый') ( `HTTP: // локальный: $ {process.env.PORT}`);}}); Когда я открываю URL в Chrome, я могу увидеть страницу, но она не обновляется автоматически при изменении файла. Может кто-нибудь пожалуйста, скажите мне, что я делаю неправильно? UPDATE package.json { "имя": "вю-кино", "версия": "1.0.0", "Описание": "The Ultimate Vue.js Разработчики курса: Vue.js кино", " развитие ') {требуют ( "открыть") ( `HTTP: // локальный: $ {process.env.PORT}`, 'Google-хром'); }});
Bellinda Baumgartner
1

голосов
0

ответ
267

Просмотры

Internet Explorer 11 отображает ошибки в app.js (3820,1) файл vuejs приложение работает с другим браузером

Моя vuejs приложение работает с другими браузерами хорошо, но в Internet Explorer 11 он просто отображает пустую страницу. Код Бабель не конвертируется. Как я могу исправить это? Я использовал Bootstrap и Google карт в качестве плагинов.
Reshma Ks
1

голосов
1

ответ
1.1k

Просмотры

Vue.Draggable для таблиц с более чем одной TBODY

У меня есть таблица со сложной структурой. Реальная структура моего стола гораздо сложнее. Я пытаюсь показать это на простом примере. Имя Идентификатор 1 1 1 1 1 1 Я использую vuejs, и мне нужно иметь сортировки таблицы (я использую компонент vuedraggable https://github.com/SortableJS/Vue.Draggable). У меня есть компонент элемента с шаблоном, как это. {{Item.id}} {{item.name}} {{item.description}} И я использую его с перетаскиваемым. Draggable компонент создать внешний элемент «таблицы». Все работает, но как я могу добавить 'THEAD? Я пытаюсь создать еще один компонент, - элементы:
Larionov Nikita
1

голосов
1

ответ
206

Просмотры

Как определить отношения между пользователем, почт и модели, как

Я строй блог приложения с Laravel с функциональностью нравится пост (только один раз пользователь) с иконкой пальца вверх. Я создал модель каждый для пользователя, почт и как и с их соответствующими таблицами. В таблице Понравилась состоит из user_id, POST_ID и столбцов временных меток. Я также определил отношения между пользователем и Поста модели следующим образом: Внутри пользователя модели: Общественная функция пост () {вернуть $ this-> hasMany (App \ Post)} публичную функцию, как () {вернуть $ this-> hasMany (App \ Как)} и внутри столба модели; Пользователь общественной функции () {вернуть $ this-> belongsTo (App \ User)} Моя проблема, однако, в письменной форме отношения между почт и подобными моделями. Какие отношения будут существовать между двумя моделями?
banky
1

голосов
3

ответ
242

Просмотры

Как установить или проверить это. $ Родителя в модульном тестировании Vuejs?

В моих компонентов набора данных () {категории:. Это $ parent.categories => который я поставил в main.js} Файл кода main.js импорт категорий из»../config/categories'; новый Vue ({маршрутизатор, данные: {категории: категории}}); Я создал 1 тест функцию блока он ( 'проверка компонента кнопки', () => {сопз обертка = неглубоко (FormSearch), ожидать (wrapper.contains ( 'кнопка')) Тоба (истина),.}); Я бег теста затем показать сообщение об ошибке: Ошибка в данных (): «Ошибка типа: Не удается прочитать свойство„категории“неопределенных» Как это исправить. Помоги мне.
hiep
1

голосов
0

ответ
367

Просмотры

Как настроить WebPack-горячего сервера промежуточного слоя с вю-сервер-визуализатора и вю-маршрутизатор?

Я пытаюсь настроить собственный экспресс-сервер с WebPack использовать горячую замену модулей & стороне сервера визуализации. Все, кажется, работает, за исключением интеграции WebPack-горячего сервера промежуточного слоя, который нуждается в экспресс-функцию промежуточного программного обеспечения с (Рез, REQ, последующие) Params - но я не могу получить мою голову вокруг о том, как правильно реализовать. Это моя конфигурация до сих пор: webpack.config.js Const WebPack = требуется ( 'WebPack'); Const = путь требует ( 'путь'); Const конфигурации = [{имя: 'клиент', запись: [ 'WebPack-горячего промежуточного программного обеспечения / клиент', './src/js/entry_client.js'], выход: {путь: path.resolve (__ имя_директории,' расстояние / JS / '), имя файл: 'app.js'}, модуль: {правила: [{тест: /\.vue$/, грузчики: 'вя-погрузчик' }, {Тест: /\.js$/, исключить: / node_modules /, погрузчик: 'Бабель-погрузчик'}]}, постановляю: {псевдоним: {вю $: 'вю / расстояние / vue.runtime.js'} }}, {имя: 'сервер', цель: 'узел', запись:»./src/js/entry_server.js, выход: {путь: path.resolve (__ имя_директории, 'расстояние / JS /'), имя файла : 'app.server.js', libraryTarget: 'commonjs2'}, внешние: требуется ( 'WebPack-Node-внешние') (), модуль: {правила: [{тест: /\.vue$/, погрузчик: ' вю-погрузчик»}]}, постановляю: {псевдоним: {вю $: 'вю / расстояние / vue.runtime.js'}}}]; если (process.env.NODE_ENV! == 'производства' ) {Конфигурации [0] = .plugins [новый webpack.HotModuleReplacementPlugin ()]; } Module.exports = конфигурация; entry_client.js импорт {createApp} от './app'; Const {приложение, маршрутизатор} = createApp (); router.onReady (() => {$ приложение монтирования ( '# приложение.');}); entry_server.js импорт {createApp} от './app'; Контекст экспорта по умолчанию => {возвратить новый посыл ((решительность, отклонять) => {сопз {приложение, маршрутизатор} = createApp (); router.push (context.url); router.onReady (() => {если (! . router.getMatchedComponents () длина) возвращение отвергают ({код: 404}); решимость (приложение);}, отклонить);}); }; app.js импорт Вьет из «ви»; импорт App из '../vue/app.vue'; импорт {createRouter} от './router'; экспорт функции createApp () {Const маршрутизатор = createRouter (); Const приложение = новый Вью ({маршрутизатор, визуализации: ч => ч (приложение)}); возвращение {приложение, маршрутизатор}; } Router.js импорт Вьет из «ви»; импорт маршрутизатор от «вю-маршрутизатор»; импорт Главная из «../vue/home.vue»; импортировать О «из ../vue/about.vue»; Vue.use (маршрутизатор); Функция экспорта createRouter () {вернуть новый маршрутизатор ({режим: 'История', маршруты: [{путь: '/', компонент: Главная}, {путь: '/ о', компонент: О}]}); } server.js Const = выразить требуется ( 'экспресс'); константное фс = требуется ( «фс»); Const = путь требует ( 'путь'); Const расслоение = требуется ( './ расстояние / JS / app.server'); Const визуализатор = требуется ( 'ви-сервер-визуализатор') createRenderer ({шаблона:. фс. readFileSync ( './ SRC / HTML / index.html', 'UTF-8')}); Сервер = Const экспресс (); // добавить VUE HMR промежуточное программное обеспечение, если (process.env.NODE_ENV == 'производства') {сопз WebPack = требуется ( 'WebPack'); Компилятор Const = WebPack (требуется ( './ webpack.config')); server.use (требуется ( 'WebPack-DEV-промежуточного слоя') (компилятор, {noInfo: истинно, serverSideRender: истинно})); server.use (требуется ( 'WebPack-горячей промежуточное программное обеспечение') (compiler.compilers.find (компилятор => compiler.name === 'клиента'))); // server.use (требуется ( 'WebPack докрасна-сервера промежуточного программного обеспечения') (компилятор)); } Еще {// статический файл служит server.use (требуется ( 'служить-фавиконки') (path.join (__ имя_директории, 'SRC / PNG / Favicon-32x32.png'))); server.use (express.static (path.join (__ имя_директории, 'расстояние /'), {индекс: ложный})); } Server.get ( '*', (REQ, Рез) => {bundle.default ({URL: req.url}.), То (приложение => {renderer.renderToString (приложение, {название: 'Некоторые название', описание: 'Некоторые описание'}, (эээ, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение res.status (500) Пошлите ( 'Внутренняя ошибка сервера' );} res.send (HTML);});}, ERR => {если (err.code === 404) возвращение res.status (404) Пошлите ( 'Страница не найдена'); console.error ( ERR), возвращение res.status (500) Пошлите ( 'Внутренняя ошибка сервера');});}); server.listen (4040); renderToString (приложение, {название: 'Some название', описание: 'Некоторые описание'}, (ERR, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение Рез. статус (500) Пошлите ( 'Внутренняя ошибка сервера');} res.send (HTML);}); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); renderToString (приложение, {название: 'Some название', описание: 'Некоторые описание'}, (ERR, HTML) => {если (ERR) {console.error ( 'Ошибка в renderToString:', эээ); возвращение Рез. статус (500) Пошлите ( 'Внутренняя ошибка сервера');} res.send (HTML);}); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); } Res.send (HTML); }); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); } Res.send (HTML); }); }, ERR => {если (err.code === 404) возврата res.status (404) Пошлите ( 'Страница не найдена'); console.error (ERR); вернуться res.status (500) .send ( 'Внутренняя ошибка сервера'); }); }); server.listen (4040);
dennis
1

голосов
1

ответ
175

Просмотры

не Masonry.js applaying раскладки

Я использую Laravel, VueJS и библиотеку Masonry.js для создания динамической галереи и я перед странной проблемой. У меня есть это в моем шаблоне VueJS: И это, как я получаю мои изображения: импорт кирпиче «кладки верстки»; экспорта по умолчанию {данных () {возвращение {BGS: [], WD: '300', Hg: []}}, методы: {getPhotos () {вар URL = '/ фотографии / получить' axios.get (URL). затем (г => {this.bgs = r.data для (вар я = 0; г <r.data.length; я ++) {вар фактор = r.data [I] .width / 300 вар resizeHeight = Math.floor (r.data [I] .height / фактор) this.hg.push (resizeHeight)}}); }}, Смонтированный () {пусть $ кладку = новый масонства (это $ refs.grid, {itemSelector:.». Сетка-элемент», ColumnWidth: 300, isFitWidth: истинный}); }, Созданный () {this.getPhotos ()}} Проблема заключается в том, что каждое изображение появляется ниже последней. В любом случае, это другая часть кода работает просто отлично: импорт Кладка из «кладки верстки»; экспорта по умолчанию {данных () {возврата {BGS: [], WD: [], Hg: []}}, методы: {rndBg () {для (вар я = 0; я <20; я ++) {вар WD = 300 вар Hg = Math.floor (Math.random () * 350) + 150 вар bgsrc = 'https://placehold.it/' + + WD 'х' + Hg this.bgs.push (bgsrc) this.wd .С (WD) this.hg.push (Hg)}}}, смонтированный () {пусть $ кладка = новое масонство (это $ refs.grid, {itemSelector:. .grid-вещь ', ColumnWidth: 300, isFitWidth: истинный}); }, Созданный () {this.rndBg ()}} Проблема заключается в том, что я использую placeholdit фиктивных изображения, а не те, которые я так хочу ... Я не делаю работу для меня. Я использую ту же логику, но ... да, я не могу заставить его работать.
Enrique Bermúdez
1

голосов
1

ответ
1.1k

Просмотры

Vue.js - How to add components inside rendered HTML

I need to format a Wordpress-based website editor from being fully pre-rendered to being rendered through Vue.JS. The editor's backend (done in PHP) sends me the HTML of the elements on the page. I want to render the page with Vue.js templates/components, with the HTML from the backend, for each element. It would look something like: The problems is that these elements can also have children. Not only that, but some of the elements with children (for example accordions) could look like this: Or ... ... Where the divs that wrap the child element belong to the parent element (in the HTML sent by the server). Here's a real-life example of the object I'm supposed to convert into a component based interface. { id: 1, html: "%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_2%%% ... ", children: [ { id: 2, html: "This is the final content", children: [] }, { id: 3, html: "%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_5%%%", children: [ { id: 5, html: "This is the final content", children: [] } ] }, { id: 4, html: "%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_6%%%%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_7%%%", children: [ { id: 6, html: "This is the final content", children: [] }, { id: 7, html: "This is the final content", children: [] } ] } ] } Now the question is: How do I render these children INSIDE the parent's HTML while also having them as components?
Peter
1

голосов
1

ответ
526

Просмотры

Использование мультипликатора «выберите» HTML-элемент с Vue.js и Materializecss

Я пытаюсь сделать HTML несколько выберите элемент формы с Vue.js. Он отлично работает после того, как после этого. Однако, если бы я добавить CSS материализуются, то выберите элемент выглядит лучше, но он не работает, и я получаю эти предупреждения: [Вью предупреждают]:: рядный выбранные атрибуты на будут игнорироваться при использовании V-модели. Объявить начальные значения в опции данных компоненты вместо этого. [Вью предупредит]: ожидает значение массива для его связывания, но получил номер (находится в корневой экземпляр) Это мой Vue.js код: вар приложение = новый Vue ({эш: «#app» данные: {отмеченными: 900 , опции: [{значение: 12, текст: 12}, {значение: 24, текст: 24}, {значение: 36, текст: 36}]},
Seio
1

голосов
1

ответ
65

Просмотры

вя-кли: Я могу использовать @ в , но не

В вю-кли, так как он определен в webpack.base.conf.js, я могу использовать @, как это: но не так, как это в: фон: URL (@ / активы / logo.png); на самом деле я могу написать как URL (../ активы / logo.png), и она работает, но это делает URL зависит от пути компонента: Я бы переписать URL, если я перееду компоненты (в подкаталоге, например, ). Как решить эту проблему?
akai
1

голосов
1

ответ
383

Просмотры

Vue несколько экземпляров расслоения плотного модуля

Не уверен, что если этот вопрос будет соответствующим названием. Я использую Vue 2 и несколько нуб на него (это мой третий день). У меня есть основное приложение со страницами продукта. Моя система оплаты через полоску. Я использую модуль НПМ здесь https://www.npmjs.com/package/vue-stripe Если я просматриваю вокруг сайта и нажмите на несколько продуктов, кажется, как он создает все больше и больше экземпляров полоской, потому что, когда Я иду, чтобы сделать покупку, это делает такое же количество звонков, как, сколько раз я нажал на страницах продукта. Так что, если я только один раз посетить страницу продукта, полоса апи только вызывается один раз, на мой второй визит на страницу продукта полоса апи вызывается дважды, когда я делаю покупки, и так далее. Другое дело, если я обновить страницу, нажав на кнопку браузера перезагрузки он возвращается в исходное положение, и только загружает один экземпляр полоской. Мой продукт.
Bob
1

голосов
0

ответ
527

Просмотры

Vue ,listen to route param change but not child route change?

Я иметь следующую структуру в vue.js, используя VUE-маршрутизатор. маршруты: [{путь: '/' домены, компонент: ListOfDomains}, {путь: '/ домен /: Домен', компонент: Домен, дети: [{// содержимое Фотографий Tab воздадутся внутри домена // Когда / домена /: / ID фотография подобранна путь: 'сообщения', название: 'сообщения', компонент: PostsTabContent}, {путь: 'фотографии', название: 'фото', компонент: PhotosTabContent}]}] В моем компоненте домена я использую наблюдатель для извлечения доменов данных, связанных с сервера, например: «$ маршрута»: функции (к, с) {console.log ( «сторож вызвал»); // сделать обновление только если домен изменился // сделать что-то, AJAX запрос, обновление магазина и т.д.} Это, кажется, работает хорошо, но моя проблема в том, что я только хочу сделать мои обновления, если URL изменяется от, скажем, домена / domain23 / сообщения в домене / domain45 / сообщения и не тогда, когда он переходит из области / domain23 / сообщений в домене / domain23 / фотографии. Как я могу смотреть только то, что уровень в пути для изменения?
Sainath S.R
1

голосов
1

ответ
446

Просмотры

Как хранить маркер JWT правильно используя Laravel 5.4 и Vue.js 2

Я пишу API, используя Laravel 5,4 и подключиться к нему из внешнего интерфейса, написанной в Vue.js 2. После Логин API получает обратно маркер для меня, так что, как и где я должен хранить маркер в веб-интерфейсе? Теперь я использую LocalStorage для этого, но это, кажется, не правильный путь. Это, как я проверить знак: router.beforeEach ((в, из следующего) => {если (to.meta.requiresAuth) {если (store.getters.logged || window.localStorage.getItem ( 'access_token') ) {следующий ();} еще {следующий ( '/ Войти');}} еще {следующей ();}});
1

голосов
0

ответ
669

Просмотры

Вью Getter и Setter вместо фактических значений в ответ бэкэнд

Я новичок в Vue, и я изо всех сил, чтобы понять, почему моя проблема происходит. Когда я делаю вызов моего бэкэнду, чтобы получить некоторые данные в ответ выглядит следующим образом: ID: Getter и Setter Имя: Getter & сеттер сезон: Getter и Setter номер: Getter и Setter В Vue, если изменить данные в качестве объекта вместо функций, я получаю значение я ожидаю. ID: 10897 Название: «Минимальная жизнеспособный продукт» сезон: 1 номер: 1 От чтения документации Vue, я знаю, данные должны быть функцией, но я не понимаю, почему это влияет на данные я получаю? Я извлечь данные следующим образом: методы: {эпизоды асинхронных () {константный ответ = жду EpisodesService.getAllEpisodes () console.log (ответ)}
shibetoshii
1

голосов
0

ответ
557

Просмотры

Vue.js + Элемент - потери активного класса пункта меню при переключении меню

Я использую библиотеку Element.eleme.io UI с Vue.js 2+ и построение вертикальной боковой панели (документы: http://element.eleme.io/#/en-US/component/menu) Проблема в том, когда Я переключить меню, чтобы развернуть / свернуть, я схожу выбранный активный пункт меню / (в документации всегда реверс по умолчанию один, например) - как сохранить ее между этим переключателем? В настоящее время я даже создал вычисленное значение по умолчанию активные опоры, но он по-прежнему не работает, как я хотел бы: Забавная / Странная вещь, что после переключая меню, проп по умолчанию активных установлен правильно, но активный класс пункта меню исчезнет, ​​и пользователь не знает, какой элемент выбрана.
lukaszkups
1

голосов
0

ответ
94

Просмотры

Vuejs: Как я могу передать предложение с внутри него, как пропеллер?

Я делаю страницу ответа и вопрос в Vue.js, где ответы инкапсулированных в другом компоненте. Однако, когда я пытаюсь сделать это: импорт AnswerBox из @ / компоненты / FAQAnswer 'экспорта по умолчанию {компоненты: {AnswerBox}, данные () {возвращение {answer1: «Извините, но нет - мы не \» т сделать те больше. Тем не менее, вы можете направиться к нашим партнерам, чтобы проверить, если они до сих пор их»}}} Я попытался с помощью вычисляемого пропеллера, который заменяет„с“, заменив„с“при прохождении пропеллера, и положить эти подпорки в v- HTML директива. Предложение визуализируется, но маршрутизатор линия связь отображаются как регулярная строка (без ссылки) Кстати, я использую VUE 2.5, vscode, eslint 4.10, узел 8.9.3, WebPack 3.8
brightknight08
1

голосов
1

ответ
354

Просмотры

How to use createAutoCorrectedDatePipe and createNumberMask feature from text-mask in vue?

Я использую этот удивительный компонент VUE под названием текст маска, он предлагает простое, но элегантное решение для ввода маски, которые я использую для ввода формата DATETIME и формата чисел. я могу сделать это работает по большей части на основе из документации, как этот номер телефона импорт MaskedInput из «ви-текст-маски» экспорта по умолчанию {имя: «имени», компоненты: {MaskedInput}, данные () {возвращение {Телефон: ' }}}, но предлагает только некоторые базовые функциональные возможности, и мне нужно больше как для ввода даты и времени я хочу, чтобы убедиться, что максимальное количество за месяц (только 12) и на сегодняшний день (30 или 31 в зависимости от месяца), и есть те особенности, в текст-маска, которая действует в качестве аддонов, но я не могу найти или понять, как заставить его работать в вю. я пытался создать проблему на GitHub, но видя активность там я думаю, что мой вопрос не будет ответа. поэтому я думаю, что это так намного быстрее, если я просто прошу вас все здесь. Может быть, есть кто-то, кто когда-либо использовал это или, может быть, у других гораздо лучше для ввода Рекомендации для компонента маски, которая работает в вю пути?
Laurensius Tony
1

голосов
1

ответ
49

Просмотры

VueJS: Могу ли я объявить динамически вычисляться :?

Из этого куска кода: Как я могу иметь message01, message02 ... объявленный в вычисленных значениях?
maxagaz
1

голосов
1

ответ
898

Просмотры

Развертывание Nuxt.js в Google App Engine Return 502 Bad Gateway

Привет есть кто-нибудь, кто пытался развернуть nuxt приложение Google App Engine. Я пытался от nuxt регулярного и экспресс-шаблон, он показывает 502 Bad Gateway. Я ничего от создания-nuxt-приложение команды не изменять. Мой app.yaml файл содержит время выполнения: nodejs ENV: Flex Есть ли что-нибудь не так с моей установки или может быть, есть некоторые дополнительные настройки я должен сделать? Вот мой package.json { "имя": "nuxt-PWA-vuetify-стартер", "Версия": "1.0.0", "Описание": "Проект стартера Nuxt.js + PWA + Vuetify.js", " автор ": "Jefry Dewangga", "частный": правда, "домашняя страница": "https://github.com/jefrydco/nuxt-pwa-vuetify-starter#readme", "лицензия": "MIT"," хранилище ": { "типа": "мерзавец","
Jefry Dewangga
1

голосов
0

ответ
843

Просмотры

vue.esm.js?efeb:578 [Vue warn]: Cannot find element: #app

I'm trying to start a vue.js app from scratch. I'm trying to create an app.vue and an app.js but form some reason I'm getting this error. vue.esm.js?efeb:578 [Vue warn]: Cannot find element: #app I've been trying to figure out what I've done wrong for 2 hours now and I can't seem to understand what is happening. app.js import Vue from 'vue' import { ApolloClient } from 'apollo-client' import { InMemoryCache } from 'apollo-cache-inmemory' import { HttpLink } from 'apollo-link-http' import VueApollo from 'vue-apollo' import Index from './Index.vue' const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql', }) const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), connectToDevTools: true, }) Vue.use(VueApollo) const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) new Vue({ el: '#app', apolloProvider, render: h => h(Index) }) Index.vue {{ msg }} The following was loaded over Graphql: export default { data () { return { msg: 'Welcome to Your Vue.js & Phoenix & GraphQL App', user: "" } }, } Router defmodule StatcastersWeb.Router do use StatcastersWeb, :router pipeline :browser do plug :accepts, ["html"] plug :fetch_session plug :fetch_flash plug :protect_from_forgery plug :put_secure_browser_headers end pipeline :api do plug :accepts, ["json"] end scope "/", StatcastersWeb do pipe_through :browser # Use the default browser stack get "/", PageController, :index end layout/app.html/eex Hello Statcasters! Again I really have no idea what I'm doing wrong and why vue.js can't find the element. Hopefully I've posted enough information for y'all to help me out. Thank you!
Bitwise
1

голосов
2

ответ
69

Просмотры

VueJS конвенции и область применения

Я посмотрел в документации, на форуме ... Я хотел бы знать это: Когда я создаю компонент с контекстным стилем. Должен ли я использовать классы или идентификатор для моего DOM? Я предпочитаю ID, потому что этот элемент является уникальным. например: // или класс = «обертка»? НАЖМИТЕ // или класс = "myBtn"? {{Я}} // уверен класс в этом случае: D Для методов компоненты должен начинаться от $ _mycomposant_methods или я могу непосредственно написать метод? То же самое для вычислена? Я полагаю, что при компиляции (WebPack) каждый компонент, но область действия я хотел бы быть уверенным, чтобы избежать краевых эффектов. Спасибо
Brice Chaponneau
1

голосов
1

ответ
129

Просмотры

Применение VUE-Katex для содержимого, загруженного из статической папки

Я пытаюсь сделать блог с помощью Vue, как изложено в отличной демонстрации здесь. Я хотел бы включить некоторые математические формулы и уравнения в моем блоге, так что я думал, что я хотел бы попробовать использовать VUE-Katex. вя-Katex форматирует мои математические обозначения прекрасно, когда я положил весь мой Katex HTML непосредственно в мои шаблоны Vue, но создать годный к употреблению блог, мне нужно, чтобы держать мое содержание отдельно от моих шаблонов (как показано в демо-версии). Я не могу получить VUE-Katex для форматирования содержимого HTML в статической папке. Вот что я хотел бы помочь с. Настройка Я клонировал GitHub репо для демонстрации. Я добавил VUE-Katex к package.json: "Вьет-Katex": "^ 0.1.2", я добавил Katex CSS к index.html: Я добавил оператор импорта в SRC / App.vue: импорт из Vue «ви 'импорт VueKatex из „ви-Katex“ Вьет. использовать (VueKatex), и я добавил простую линию HTML с Katex в шаблон BlogPost: Вот это уравнение в самом шаблоне Ви: Как я уже сказал, это работает - я вижу отформатированную математическую запись в моем блоге (URL HTTP: // локальный: 8080 / чтение / neque-либеро-convallis-Eget): Тем не менее, мне нужны разные уравнения для каждого сообщения в блоге, конечно. Так что я попытался добавить Katex HTML в поле «содержание» в формате JSON для первой записи в блоге: статический / апи / пост / neque-либеро-convallis-eget.json. Я изменил «содержание» линию: «содержание»: «Вот это уравнение в статической папке:» появляется на странице просмотра видео, но уравнение не оказывает. Я вижу это: (текст появляется, но ни одно из уравнений не показано) Когда я использую инструменты для разработчиков, чтобы проверить HTML на странице, я вижу это: Вы можете видеть, что вю-Katex был применен к уравнению я помещал в шаблоне непосредственно: он разбирается в HTML я напечатанный на множество пролетов со всеми математическими символами, которые показаны отлично. Однако Katex HTML я добавил в «содержание» в статической папке просто было размещено на странице точно так, как я напечатал его, и поэтому не отображается в виде уравнения на этой странице. Мне действительно нужно, чтобы мой блог содержания в этой статической папке - Я не хочу, чтобы создать другой .vue файл для каждого сообщения в блоге, что побеждает точка! Мой вопрос: есть ли способ, чтобы вручную «применить» Вьет-Katex в HTML я место в статическом папке, при загрузке? Может быть, есть что-то я могу добавить к плагинов / ресурс / index.js файла, поскольку это содержит функцию, которая загружает данные из статической папки? Заранее большое спасибо за любую помощь.
Gareth Williams
1

голосов
1

ответ
120

Просмотры

инициализация глобального подмешать в weex

Я инициализируется в weex и VUE приложение с помощью weex создать удивительный-проект. В entry.js файла я пытаюсь зарегистрировать глобальные подмешать но это, кажется, не зарегистрирует. Код является: импорт weex из 'weex-Вьет-визуализацию' импорт Vue из 'ви' Vue.mixin ({вычислен: {устройство () {возвращение 'мобильное'}, браузер () {вернуть this.device === 'браузера}, мобильный () {вернуть this.device === 'мобильная'}}}) weex.init (Вью) ни один из компонентов не имеют this.mobile как истинный. Прекрасно работает в веб-тренажере, но не тогда, когда я сканировать QR-код на телефоне.
Tuqire Hussain
1

голосов
0

ответ
31

Просмотры

Данные не обновляются с помощью eventbus

У меня есть eventbus, что обжигали при нажатии кнопки, задача состоит в том, что код внутри обратного вызова не работает, но протоколирования консоли внутри же обратного вызова работает. Это, как я обжиг событие. editCampaign (кампания) {$ eventBus испускают ( 'editCampaign', кампании). . Это $ router.push ( '/ кампании / создания'); } И ниже, как я слушаю событие. создано () {this.getDetails (); . EventBus $ на ( 'удаляемого-сообщения' (сообщения) => {this.messageDeleted (сообщения)}); пусть сам = это; eventBus $ на ( 'editCampaign', функция (кампании) {console.log ( 'кампания отредактирован.'); self.edit = правда, сам. кампания = кампания})} Это консоль вошла кампании отредактированы, но редактировать и кампания не были обновлены. данные () {возвращение {кампании: '', редактировать ложь}},
Justin

Просмотр дополнительных вопросов